Question

我很感激任何帮助，我已经被困了几个小时。我已经制作了一个手风琴页面，我希望页面在桌面模式下最终成为两列，当你调整大小到移动设备和平板电脑时，它会叠加到一列中。

代码 - 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作为参考，但我完全没有成功，你可以看到。我究竟做错了什么？再一次任何帮助都会很棒

Answer 1

非常简单

<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>

Answer 2

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

由于缺少bootstrap css，我添加了一些额外的css，当bootstraps可用时应该丢弃它们。你的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>

Bootstrap-正确应用嵌套网格列

2 个答案: