Question

我尝试创建一个有三个主要部分的页面：我在下面称它们为.one，.two和.three。这三个div在移动设备（xs）上叠加在一起，但在sm视图.three上应该作为侧边栏向右移动，而.one和.two应该保持堆叠。

这是html：

<div class="container">
    <div class="row one">
        <div class="one col-xs-12 col-sm-8">
            <div> lorem ipsum </div>
        </div>
    </div>
    <div class="row two">
        <div class="two">
            <div class="col-xs-6 col-sm-2" id="Prev">
                left arrow
            </div>
            <div class="col-xs-6 col-sm-2 col-sm-offset-4" id="Next">
                right arrow
            </div>
        </div>
    </div>
    <div class="row three">
        <div class="three col-xs-12 col-sm-3">
            lorem ipsum
        </div>
    </div>
</div> <!--container -->

在视觉上，它是这样的：
.one col-sm-8 .three col-sm-3 col-sm-offset-1
.two col-sm-2 * 2

我试图在没有行的情况下完成此操作，但左箭头.two col-sm-6填充在.one col-sm-8的右侧，并将其他两个div留在其下方。对于这三行，.three col-sm-3 col-sm-offset-1在.one col-sm-8旁边没有正确上升。如何使这些列正常工作？

Answer 1

尝试

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-9">
          <div class="row one">
            <div class="col-xs-12"><div> lorem ipsum </div></div>
          </div>
          <div class="row two">
            <div class="col-xs-6" id="Prev">left arrow</div>
            <div class="col-xs-6" id="Next">right arrow</div>
          </div>
        </div>
        <div class="three col-xs-12 col-sm-3">lorem ipsum</div>
    </div>
</div>

Bootstrap网格列无法正常工作

1 个答案: