在模態窗口內引導窗體樣式

Question

我堅持了一段時間。我在模態窗口中添加了一些輸入來創建一個賽季。但它仍然沒有響應（在較小的屏幕上顯得非常糟糕）。

另外這兩個按鈕應該在井的右側。我嘗試了諸如「拉右」課程或「向左漂移」和絕對位置之類的東西，但他們總是穿過灰色背景。我該如何解決這個問題？

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
<div class="modal-dialog" role="document"> 
<div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h3 class="pull-left">Seasons</h3> 
    </div> 

    <div class="modal-body" style="position: relative;"> 

    <div class="well"> 
     <div class="row" style="width: 80%; margin: 0;"> 
      <div class="col-sm-6"> 
       <span class="bold">Season name</span> 
       <input type="text" placeholder="e.g. High season"> 
      </div> 
      <div class="col-sm-3"> 
       <span class="bold">From</span> 
       <input type="date" style="font-size: 1.23rem; display: inline-block;"> 
      </div> 
      <div class="col-sm-3"> 
       <div style="margin-left: 40px;"> 
       <span class="bold">To</span> 
       <input type="date" style="font-size: 1.23rem;display: inline-block;"> 
       </div> 
      </div> 
     </div> 
      <br> 
      <button type="button" class="btn btn-default" data-dismiss="modal" style="position: absolute; right: 50px;">Close</button> 
      <button type="button" class="btn btn-primary" style="position: absolute; right: 20px;">Save</button> 
    </div> 
    </div> 
</div> 

編碼在線放在這裏：http://www.bootply.com/ojhdwC4y4x#

Answer 1

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 
    Launch demo modal 
</button> 

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">×</button> 
      <h3 class="pull-left">Seasons</h3> 
     </div> 

     <div class="modal-body"> 

     <div class="well"> 
      <div class="input-group"> 
      <input type="text" class="form-control" placeholder="Season name" aria-describedby="basic-addon1"> 
      </div> 
      <div class="input-group"> 
      <input type="text" class="form-control" placeholder="From" aria-describedby="basic-addon1"> 
      </div> 
      <div class="input-group"> 
      <input type="text" class="form-control" placeholder="To" aria-describedby="basic-addon1"> 
      </div> 
     </div> 
     <br> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save</button> 
     </div> 
    </div> 
    </div> 
</div> 

它之前<input>標籤引起<span>標籤，我想。讓我們嘗試使用上面的代碼，而不是使用引導輸入。
和Result：

Answer 2

<div class="row" style="width: 80%; margin: 0;"> 
      <div class="col-sm-6"> 
       <span class="bold">Season name</span> 
       <input class="form-control" type="text"> 
      </div> 
      <div class="col-sm-3"> 
       <span class="bold">From</span> 
       <input class="form-control" type="date"> 
      </div> 
      <div class="col-sm-3"> 
       <span class="bold">To</span> 
       <input class="form-control" type="date"> 
      </div> 
     </div> 

怎麼樣去改變它的引導式的默認？

Answer 3

的按鈕，你應該使用modal-footer像described here。對於響應代碼試試這個：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 
    Launch demo modal 
</button> 

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">×</button> 
      <h3 class="pull-left">Seasons</h3> 
     </div> 

     <div class="modal-body"> 

     <div class="well"> 
      <div class="row"> 
      <div class="col-sm-5"> 
       <span class="bold">Season name</span> 
       <input type="text"> 
      </div> 
      <div class="col-sm-3"> 
       <span class="bold">From</span> 
       <input type="date" style="font-size: 1.23rem;"> 
      </div> 
      <div class="col-sm-3"> 
       <span class="bold">To</span> 
       <input type="date" style="font-size: 1.23rem;"> 
      </div> 
      </div> 
     </div>   
     </div> 

     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save</button> 
     </div> 

    </div> 
    </div> 
</div> 

注意，模態分量已經LIMTED大小和行定義了一些利潤，但本地的HTML 5日起將不適合於井格設置很好。因此，您可以從「季節名稱」中刪除一列。如果你有更多的元素，我建議將它們分成多行。