在模态窗口内引导窗体样式

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日起将不适合于井格设置很好。因此，您可以从“季节名称”中删除一列。如果你有更多的元素，我建议将它们分成多行。