使用推拉 类 和 Bootstrap 时如何将内容保留在容器内？

Question

我正在尝试使用 push/pull 类 ，它们似乎可以像我预期的那样工作，但它们不会留在容器内。我该如何解决这个问题？

<div class="container">
    <div class="row">
        <div class="col-xs-4 col-xs-push-4">
            <p style="color:black;">sidebar</p>
        </div>
        <div class="col-xs-8 col-xs-pull-8">
            <p style="color:black;">main content</p>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-xs-8">
            <p style="color:black;">main content</p>
        </div>
        <div class="col-xs-4">
            <p style="color:black;">sidebar</p>
        </div>
    </div>
</div>

http://www.bootply.com/wvbSlom5BU

Answer 1

您正在推动宽度为 4 x 4 的列和宽度为 8 x 8 的列。您需要将宽度为 4 的列推入 8，将宽度为 8 的列拉出 4。

BOOTPLY

HTML:

<div class="container">
  <div class="row">
        <div class="col-xs-4 col-xs-push-8">
            <p style="color:black;">sidebar</p>
        </div>
        <div class="col-xs-8 col-xs-pull-4">
            <p style="color:black;">main content</p>
        </div>
  </div>
  <div class="row">
        <div class="col-xs-8">
            <p style="color:black;">main content</p>
        </div>
        <div class="col-xs-4">
            <p style="color:black;">sidebar</p>
        </div>
  </div>
</div>

请参阅 documentation 了解这些 类。

您也不需要为行设置多个容器 div，只需一个。