Bootstrap-正确应用嵌套网格列答案

【问题标题】：Bootstrap- Applying Nested Grid Columns properlyBootstrap-正确应用嵌套网格列
【发布时间】：2015-07-07 14:01:17
【问题描述】：

如果能提供任何帮助，我将不胜感激，我已经被困了几个小时了。我制作了一个手风琴页面，我希望该页面在桌面模式下以两列形式结束，当您将大小调整为移动设备和平板电脑时，它们会堆叠成一列。

代码-http://codepen.io/Ahhmmogh/pen/KpoReG

<div class="row">
<div class="col-sm-8"

我使用了http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_ex3&stacked=h 作为参考，但正如您所见，我根本没有成功。我究竟做错了什么？同样，任何帮助都会很棒

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

我已经更新了你的一段代码： http://codepen.io/anon/pen/OVvZev

由于缺少引导 css，我添加了一些额外的 css，当引导程序可用时应该丢弃这些 css。您的 html 也无效。

基本上我做的是这样的：

 <div class="row">
      <div class="col-xs-12  col-sm-6">
         ... this content is full width on xs which is the smallest bootstrap viewport size. and half on sm or higher.
     </div>
     <div class="col-xs-12  col-sm-6">
         ...
     </div>
 </div>

希望这将进一步帮助您。我把两列都弄得一样宽，否则我看起来很奇怪，因为它们挨在一起。但如果你愿意，你应该这样做：

 <div class="row">
      <div class="col-xs-12  col-sm-8">
         ... this content is full width on xs which is the smallest bootstrap viewport size. and half on sm or higher.
     </div>
     <div class="col-xs-12  col-sm-4">
         ...
     </div>
 </div>

【讨论】：

做到了，我明白我哪里出错了。感谢您的帮助
当我在移动模式下查看时，页面仍然没有堆叠。有什么建议吗？
codepen 不能在您的移动视图中使用吗？它应该可以工作。
当我下载并打开索引时，它不会在移动模式下堆叠，只是并排形成 2 个较小的列。
您应该将窗口大小调整为移动设备大小。可能会在 480 像素左右或更小，才能看到它包裹在另一个像素之下。 Bootstrap 使用其媒体查询来调整屏幕大小的行为。

【解决方案2】：

很简单

<div class="row">
    <div class="col-xs-12 col-sm-8">
        left content
        xs: 12 cols / sm and higher: 8 cols
    </div>
    <div class="col-xs-12 col-sm-4">
        right content
        xs: 12 cols / sm and higher 4 cols
    </div>
</div>

【讨论】：