Bootstrap modal - 不在模态体内的元素答案

【问题标题】：Bootstrap modal - elements not inside modal bodyBootstrap modal - 不在模态体内的元素
【发布时间】：2017-07-27 02:04:50
【问题描述】：

我有模态对话框（按下按钮打开），它向我展示了这个：

我不明白为什么这些输入在模态对话框之外？

例如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>

【问题讨论】：

标签： twitter-bootstrap bootstrap-modal

【解决方案1】：

您的示例和链接不包含相同的代码。这里的代码缺少表单组和模态体样式。该链接应该可以工作-它只是拉错了ID（#myModal）。将 data-target 更改为 #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>

【讨论】：