logo标签列表

在移动设备上，将Bootstrap交替布局转换为堆叠布局

htmlcsstwitter-bootstrapresponsive-design
3
我在Bootstrap中有一个基本的响应式布局，其中图像位于文本块旁边。在第一行中，图像在左侧，在第二行中，图像在右侧。这在页面下方重复发生。
问题在于：当用户使用移动设备时，图像变为全宽（应该如此），但对于任何将图像对齐到右侧的行，它会位于文本下方而不是上方（请参见下面的代码）。我理解为什么会出现这种情况，但想知道是否有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>

非常感谢您的帮助。

你能为此添加一个 Fiddle 吗？这样我就能帮助你了。 - Sandeep Kumar
简短说明：基于Bootstrap的移动优先概念，只要您不想更改列规格，就不需要指定col-md样式。 - Steven Web
1个回答
3
您正在寻找类似于“嵌套列”的东西：这是文档：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>
谢谢TheLittlePig - push和pull正是我在寻找的。 - Tom
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接