html - Twitter Bootstrap 仅在设备 "sm"上看起来很奇怪

Question

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

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

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

如你所见，我已经使用hidden-sm hidden-md hidden-lg 在 xs在不同的设备上显示不同的布局和隐藏-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 对此网格没有影响。