bootstrap3.7模态调整宽度以适应内容

Question

我正在尝试创建一种模式，以适应我要提供的内容。

我正在使用的模式非常简单。没有什么花哨。

<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 id="modalTitle" class="modal-title"></h4>
        </div>
        <div  class="modal-body">
            <div id="modalBody">

                @*<select id="hiddenMenu" class="form-control"></select>*@

            </div>
        </div>
        <div id="editRuleModalFooter" class="modal-footer">

            <button id="modalSaveButton" data-toggle="modal" type="button" class="btn btn-default" data-dismiss="modal">Save</button>

            <button id="modalCancelButton" data-toggle="modal" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

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

我尝试给他们提供class =“ col-xs-12”，但没有帮助。但是，添加宽度为1000px的样式会使它变大，但模式会向右扩展。

Answer 1

使用像这样的大型模态：

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <p>Your content</p>
    </div>
  </div>
</div>