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时，我只希望它被两个推翻。我的问题是列也在推动更大的屏幕尺寸，这会破坏网格布局。

我一直在搞乱这一点，无法弄清楚它是什么。我是否将该类添加到错误的div中？遗漏了什么？

谢谢！

Answer 1

一个区块的类必须是col-xs-offset-2 col-xs-8，还需要col-sm-offset-0 col-sm-3

xs（http://getbootstrap.com/css/#grid-responsive-resets）

的clearfix div需要清除一个块

因此，您可以为xs和sm+定义完整的布局。请记住..通常，col-<RES>-x中所有<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>的x之和不应大于12。

<td width="500" style="font-size: 14px; font-family: Arial, Helvetica, sans-serif;">
    <br>
    <p>Dear + " " + @firstname@</p>
</td>

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

仅在屏幕大小为xs时才想推送列

1 个答案: