Question

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

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

但我无法理解为什么它在sm看起来很奇怪。

正如你所看到的，我已经习惯了 hidden-sm hidden-md hidden-lg xs 在不同的设备上显示不同的布局 hidden-xs 在device != xs

上显示另一个布局

也许我做错了？

Answer 1

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

XS-网格：

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

和sm-，md，lg grid：

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您也只能在xs-grid上看到col-md-6 hidden-sm hidden-md hidden-lg。您的col-md-6对此网格没有影响。

Twitter引导程序在设备“sm”上看起来很奇怪

1 个答案: