Bootstrap模态 - 不在模态体内的元素

Question

我有模态对话框（按下按钮打开），它显示了我：

我不明白为什么这些输入超出了模态对话框？

示例是here

代码：

<style>
    #myModal .modal-dialog { width: 95%;  } 
</style>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">

        <input type="text" class="col-sm-8">

        <label class="col-sm-4">Datum ponudbe:</label>
        <input type="text" class="col-sm-8">

        <label class="col-sm-4">Dokument velja do:</label>
        <input type="text" class="col-sm-8">


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

    </div>

  </div>
</div>

Answer 1

您的示例和链接不包含相同的代码。这里的代码缺少表单组和模态体样式。 链接应该工作 - 它只是拉错了ID（#myModal）。将数据目标更改为#modalOffer并且可以正常工作。

<style>
#myModal .modal-dialog { width: 95%;  } 
</style>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modalOffer">Open Modal</button>

<!-- Modal -->
<div id="modalOffer" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;
</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body" style="overflow:hidden;height:1%;">

    <div class="form-group col-sm-12">
    <label class="col-sm-2">Kraj:</label>
    <input type="text" class="col-sm-3">
    </div>

    <div class="form-group col-sm-12">
    <label class="col-sm-2">Datum ponudbe:</label>
    <input id="inputDateOffer" type="text" class="col-sm-3">
    </div>

    <div class="form-group col-sm-12">
    <label class="col-sm-2">Dokument velja do:</label>
    <input id="inputDokumentValidTo" type="text" class="col-sm-3">
    </div>


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

</div>

</div>
</div>