Bootstrap模态对话框.网格系统可以在模态上下文中使用吗？

Question

我有一个Bootstrap模式对话框,我想要布局各种标签和输入.我尝试过使用行/列类,但它们似乎没有做任何事情.我有什么选择？

谢谢,
道格

Answer 1

我把它弄好了...... http://www.bootply.com/WAwE3QyUdb

将col添加到模态体内的容器中.

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Modal header</h3>
        </div>

        <div class="modal-body">
            <div class="container col-md-12">
                <div class="row">
                    <div class="col-md-3">
                        1st col 3
                    </div>

                     <div class="col-md-3">
                         2nd col 3
                     </div>

                     <div class="col-md-3">
                         3rd col 3</div>
                     </div>
                 </div>
             </div>
         </div>
    </div>
</div>

Answer 2

只需按照下面的代码将行类添加到模态中,然后您可以根据需要划分模态:

<div class="modal-body row">
  <div class="col-md-8">
    <p>Column One content here ... </p>
  </div>
  <div class="col-md-4">
    <p>Column Two content here ... </p>
  </div>
</div>

Answer 3

Tom Rudge的回答激发了我的灵感.你不需要让容器也是一个全宽的柱子,Matt Dell指出它会失败.

改为容器容器 - 液体!

bootply并排显示col-md-12和容器流体

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Modal with container fluid</h3>
        </div>
        <div class="modal-body">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-3">
                        <p>
                            1st col 3
                        </p>
                    </div>
                    <div class="col-md-3">
                        <p>
                            2nd col 3
                        </p>
                    </div>
                    <div class="col-md-3">
                        <p>
                            3rd col 3
                        </p>
                    </div>
                    <div class="col-md-3">
                        <p>
                            4th col 3
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>