另一列中的引导列 [英] Bootstrap columns within another columns

查看：28
本文介绍了另一列中的引导列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在另一个网格中包含一个引导网格，并确保它仍然具有响应性，但在较大的屏幕上，子网格不会折叠.

<div class="row"><div class="col-md-6">第一列内容</div><div class="col-md-6"><div class="row"><!-- 子网格--><div class="col-md-6"><img class="img-responsive" src="http://placehold.it/350x150"></div><div class="col-md-6">列内容</div>

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

子网格在较大的屏幕中应该折叠，因为父类的宽度已经很小.有没有可能解决这个问题?

解决方案

Inner col-*-* 也应该包含在 row 中.阅读 关于嵌套的引导程序文档

<div class="row"><div class="col-md-6">第一列内容</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">第二列内容</div>

如果您希望它在外部网格之前堆叠/折叠，请制作内部网格 col-lg-*.断点(当列堆叠时)取决于视口宽度，而不是父容器的宽度.

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

http://www.bootply.com/aoUZozmcsc

I am trying to include a bootstrap grid inside another grid and make sure it is still responsive but on larger screens the child grid doesnt collapse. 

<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 link: http://www.bootply.com/PCMV1BF4YF

the child grid should collapse in larger screens because the width of the parent class is already small. Is it possible to get around this issue?

解决方案

Inner col-*-* should also be contained in a row. Read the 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>

Make the inner grid col-lg-* if you want it to stack/collapse before the outer grid does. The breakpoint (when the columns stack) depends on the viewport width, not the width of the parent container.

Also, instead of overriding the Bootstrap container, use a custom class.

http://www.bootply.com/aoUZozmcsc

这篇关于另一列中的引导列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆