html - Bootstrap 网格列无法正常工作

Question

我正在尝试创建一个包含三个主要部分的页面:下面我将它们称为类 .one、.two 和 。三。这三个 div 在移动设备 (xs) 上相互堆叠，但在 sm View 上 .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>