Question

我在Bootstrap中有一个基本的响应式布局，其中图像位于文本块旁边。在第一行中，图像在左侧，在第二行中，图像在右侧。这在页面上重复。

问题：当用户在移动设备上时，图像会全宽（应该如此），但是对于图像右侧对齐的任何行，它位于文本下方而不是上方（请参阅代码下面）。我理解为什么会发生这种情况，但我想知道引导程序中是否有一个类可以纠正这个问题？它必须相当普遍，那么建议的最佳做法是什么？

<div class="container">
    <div class="row feature">
          <div class="col-sm-6 col-md-6">
            <img src="url" class="img-responsive"/>
          </div>
          <div class="col-sm-6 col-md-6">
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>      
    </div>
    <div class="row feature">
          <div class="col-sm-6 col-md-6">
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>
          <div class="col-sm-6 col-md-6">
            <img src="url" class="img-responsive" />
          </div>      
    </div>
</div>

任何帮助都将不胜感激。

Answer 1

您正在寻找嵌套列之类的内容：以下是文档：http://getbootstrap.com/css/#grid-nesting

Bootply ：http://www.bootply.com/qsdH9jr70F

查看此代码：特别是col-sm-push-6和col-sm-pull-6

HTML ：

<div class="container">
    <div class="row feature">
          <div class="col-sm-6 col-md-6">
            <img src="url" class="img-responsive">
          </div>
          <div class="col-sm-6 col-md-6">
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>      
    </div>
    <div class="row feature">      
          <div class="col-sm-push-6 col-sm-6 col-md-6">   <!--   HERE   -->
            <img src="url" class="img-responsive">
          </div>   
          <div class="col-sm-6 col-sm-pull-6 col-md-6">   <!--   HERE   -->
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>   
    </div>
</div>

Bootstrap交替布局堆叠在移动设备中

1 个答案: