在另一列中引导列

Question

我正在尝试在另一个网格中包含一个引导网格，并确保它仍然可以响应，但在较大的屏幕上，子网格不会崩溃。

<div class="container">
<div class="row">
   <div class="col-md-6">First column content</div>
   <div class="col-md-6">
     <div class="row">
       <!-- child grid -->
        <div class="col-md-6"><img class="img-responsive" src="http://placehold.it/350x150"></div>
        <div class="col-md-6">column content</div>
     </div>
   </div>
</div>
</div>

bootsplay 链接：http://www.bootply.com/PCMV1BF4YF

子网格应该在更大的屏幕中折叠，因为父类的宽度已经很小了。是否有可能解决这个问题？

Answer 1

内部col-*-* 也应该包含在row 中。阅读Bootstrap docs on nesting

<div class="container">
  <div class="row">
   <div class="col-md-6">First column content</div>
   <div class="col-md-6">
     <div class="row">
       <div class="col-lg-6"><img class="img-responsive" src="http://placehold.it/350x150"></div>
       <div class="col-lg-6">Second column content</div>
     </div>
   </div>
 </div>
</div>

如果您希望内部网格在外部网格之前堆叠/折叠，请创建内部网格col-lg-*。断点（当列堆叠时）取决于视口宽度，而不是父容器的宽度。

此外，不要覆盖 Bootstrap container，而是使用自定义类。

http://www.bootply.com/aoUZozmcsc