Twitter bootstrap 仅在设备“sm”上看起来很奇怪

Question

我有以下代码： http://jsfiddle.net/W7CLF/

在xs 设备上，它看起来不错，它分成两行，然后在 > sm 上看起来也不错。保持在一条线上..

但我不明白为什么它在 sm 上看起来很奇怪。

如你所见，我用过 hidden-sm hidden-md hidden-lgxs 在不同的设备上显示不同的布局和 hidden-xs 在device != xs上显示另一个布局

也许我做错了？

Answer 1

您可能应该为每个网格添加一个结果草图。到目前为止，我了解您的代码。看来你会有：

xs 网格：

med  | 600kr
------------
home | 60

和sm-、md、lg网格：

Med        | Home | 60 | 600

所以试试这个：

<div class="container">
    <div class="row activityItem">
    <div class="col-xs-6 col-sm-6"><p class="activityText">Medicinsk fotvård</p></div>
    <div class="col-xs-6 col-sm-2 col-sm-push-4"><p class="activityText activityTextRight">600 kr</p></div>
    <div class="col-xs-6 col-sm-2 col-sm-pull-2"><p class="activityText activityTextRight"><i class="fa fa-home">Home</i></p></div>
    <div class="col-xs-6 col-sm-2 col-sm-pull-2"><p class="activityText activityTextRight">60 minuter</p></div>
</div>
</div>

注意事项： 在您使用的代码中：col-md-6 hidden-xs 您在这里没有为 sm-grid 定义任何内容。这个 div 将在 sm 网格上获得 100% 的宽度。试试col-sm-6 hidden-xs 你也使用col-md-6 hidden-sm hidden-md hidden-lg 只在xs-grid 上可见。您的 col-md-6 对此网格没有影响。