Twitter bootstrap 在模式中使用网格/行

Twitter bootstrap 在模式中使用网格/行,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,我尝试使用Bootstrap3网格系统,但在使用Modals时遇到了一些问题/困惑 基本上,我看到的是,当我向模态体添加行时,内容通常会溢出模态体。那么,让模态体拥有自己的“容器”从而拥有自己的网格的最佳方法是什么呢。我已经在我的页面的主要部分使用了.container,我已经读到你不应该嵌套.container或.container流体 我要寻找的是一些最佳实践或解释为什么我会看到一些意想不到的渲染 我应该这样做: <div class="modal-body row">

我尝试使用Bootstrap3网格系统,但在使用Modals时遇到了一些问题/困惑

基本上,我看到的是,当我向模态体添加行时,内容通常会溢出模态体。那么,让模态体拥有自己的“容器”从而拥有自己的网格的最佳方法是什么呢。我已经在我的页面的主要部分使用了.container,我已经读到你不应该嵌套.container或.container流体

我要寻找的是一些最佳实践或解释为什么我会看到一些意想不到的渲染

我应该这样做:

<div class="modal-body row">
    ...
</div>

...
或者这个:

<div class="modal-body">
  <div class="row">
    ....
  </div>
</div>
<div class="modal-body">
  <div class="col-xs-12">
    ....
  </div>
</div>

....
或者这个:

<div class="modal-body">
  <div class="row">
    ....
  </div>
</div>
<div class="modal-body">
  <div class="col-xs-12">
    ....
  </div>
</div>

....
这里有一个人为的例子:()


这是标题
标题信息右侧

左侧标题信息

  • 可乐
  • 可乐
&时代; 情态标题

第1列的模式
  • 模态Col1
  • 模态Col1
  • 模态Col2
  • 模态Col2
  • 模态Col3
  • 模态Col3
接近
  • 可乐
  • 可乐
  • 可乐
  • 可乐

页脚信息右侧

左侧页脚信息


我认为在
模态体内部
应该有一个
容器流体
col-*

                  <div class="modal-body">
                    <div class="container-fluid">
                     <div class="row">
                         (columns and more nested row/cols here)  
                     </div><!--/row-->
                    </div><!--/container-fluid-->
                  </div><!--/modal-body-->

(此处为列和更多嵌套行/列)

演示:

这也是我想到的。据我所知,嵌套容器不受支持。这里有一个地方提到:。正因为如此,我担心这样做。然而现在,这似乎是获得一致性外观的唯一方法。是的,嵌套容器的问题在这里得到了澄清:在modal header中也为我工作。也许我第一次看到的是从引导3到引导4