css - 仅当屏幕尺寸为 xs 时才想将一列推过

Question

我正在 bootstrap 中处理模板，但在涉及 xs 屏幕时遇到了问题。

我有一个基本的列布局，只有 4 个简单的列。

<div id="features-intro" class="row text-center ">
  <h1> Features </h1>
  <h5> What makes this theme great </h5>

  <div class="feature-col col-xs-8 col-sm-3">
    <a><img src="http://placehold.it/150x150"></img>
    </a>
    <h3> Feature 1 </h3>
    <p>Sample copy text. Sample copy text. Sample copy text. Sample copy text. Sample copy text. Sample copy text. </p>
  </div>

  <div class="feature-col col-sm-3">
    <a><img src="http://placehold.it/150x150"></img>
    </a>
    <h3> Feature 1 </h3>
    <p>Sample copy text. Sample copy text. Sample copy text. Sample copy text. Sample copy text. Sample copy text. </p>
  </div>

  <div class="feature-col col-sm-3">
    <a><img src="http://placehold.it/150x150"></img>
    </a>
    <h3> Feature 1 </h3>
    <p>Sample copy text. Sample copy text. Sample copy text. Sample copy text. Sample copy text. Sample copy text. </p>
  </div>

  <div class="feature-col col-sm-3">
    <a><img src="http://placehold.it/150x150"></img>
    </a>
    <h3> Feature 1 </h3>
    <p>Sample copy text. Sample copy text. Sample copy text. Sample copy text. Sample copy text. Sample copy text. </p>
  </div>

</div>

这看起来像:

| _______ _______ _______ _______ |
| some t  some t  some t  some t  |
| ext     ext     ext     ext     |
|                                 |

在大屏幕上看起来不错，但是当我进入 xs 屏幕时，我得到:

| _______________________ |
| some text some text som |

虽然我想要:

|     ________     |
|     some tex     |
|      t some      |       

所以我将这个类添加到每一列:

class="col-xs-8 col-xs-push-2"

添加这些类后，我就可以在较小的屏幕上获得想要的外观。但是我只希望它在屏幕为 xs 时被两个推过去。我的问题是列也在插入更大的屏幕尺寸，这破坏了网格布局。

我一直在弄乱这个，不知道它是什么。我是否将类(class)添加到错误的 div 中？遗漏了什么？

谢谢!

Answer 1

一个 block 的类需要是col-xs-offset-2 col-xs-8还有col-sm-offset-0 col-sm-3

xs ( http://getbootstrap.com/css/#grid-responsive-resets ) 的 clearfix div 需要清除一个 block

因此您可以为 xs 定义完整的布局和 sm+ .请记住.. 通常 x 在所有 col-<RES>-x 中的总和一行不应大于 12。

<div class="feature-col col-xs-offset-2 col-xs-8 col-sm-offset-0 col-sm-3">
  <a><img src="http://placehold.it/150x150" /></a>
  <h3>Feature 1</h3>
  <p>Text</p>
</div>

<div class="clearfix visible-xs-block"></div>

工作示例:https://jsfiddle.net/1kgyehc2/