0

Я получил следующий код: http://jsfiddle.net/W7CLF/Twitter начальной загрузки только выглядит странно на устройство «см»

на xs устройств, это выглядит красиво, он расщепляется на два ряда, а затем>sm это выглядит хорошо, как Что ж. Оставаясь на одной линии.

Но я не могу понять, почему это выглядит странно на sm.

Как вы можете видеть, я использовал hidden-sm hidden-md hidden-lg на xs , чтобы показать различные макеты на различных устройствах и hidden-xs показать другую раскладку на device != xs

Может быть, я делаю неправильно?

ответ

2

Вы должны добавить эскиз своих результатов на сетку, возможно. Пока я понимаю ваш код. Похоже, у вас будет:

хз-сетки:

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

и SM-, д.м.н., 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-сетка здесь. Этот div получит 100% ширину в сетке sm. попробуйте col-sm-6 hidden-xs Вы также используете col-md-6 hidden-sm hidden-md hidden-lg, только видимый на xs-сетке. ваш col-md-6 не влияет на эту сетку.

+0

Спасибо! Это сделал трюк! Надо будет подумать, хотя, как они тянут и толкают. Не уверен. Но спасибо! – netigger

Смежные вопросы