самозагрузки сетки для мобильного макете

У меня есть следующие разметкисамозагрузки сетки для мобильного макете

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-8"> 
     content 
    </div> 
    <div class="col-sm-4"> 
     sidebar 
    </div> 
    </div>  
    <div class="row"> 
    <div class="col-sm-8"> 
     content 
    </div> 
    <div class="col-sm-4"> 
     sidebar 
    </div> 
    </div> 
</div>

Как я могу иметь раздел содержание сидеть на верхней части боковой панели для мобильного зрения? например, с помощью данной разметки плохо получить следующий в мобильном режиме (стек)

<div class="col-sm-8"> 
    content 
</div> 
<div class="col-sm-4"> 
    siderbar 
</div> 
<div class="col-sm-8"> 
    content 
</div> 
<div class="col-sm-4"> 
    siderbar 
</div>

, но я хочу, чтобы достичь следующего для мобильного зрения

<div class="col-sm-8> 
    content 
</div> 
<div class="col-sm-8"> 
    content 
</div> 
<div class="col-sm-4"> 
    sidebar 
</div> 
<div class="col-sm-4"> 
    sidebar 
</div>

Я видел это сделано раньше, но просто забыл , Спасибо всем

источник

2015-08-24 hello world

Вы определяете поведение столбцов одинаковым для всех дисплеев. Если вы хотите, чтобы они выглядели по-другому, вы должны использовать их соответственно. Часть вашего имени css класса sm сообщает вам, как вы хотите отображать на этом конкретном размере экрана. Таким образом, вы используете xs для очень маленьких экранов, s для небольших экранов, md для средних и так далее.

Изменение вашей разметки на это должно сделать трюк, я всегда находил, что лучше всего поиграть с ним, изменив размер вашего браузера или с помощью небольшого браузера. Я немного изменил ваши столбцы, потому что мне кажется, что вы хотите, чтобы ваш контент и боковая панель отображали всю ширину экрана на мобильном устройстве.

<div class="container"> 
    <div class="row"> 
    <div class="col-md-8 col-sm-12"> 
     content 
    </div> 
    <div class="col-md-4 col-sm-12"> 
     sidebar 
    </div> 
    </div>  
    <div class="row"> 
    <div class="col-md-8 col-sm-12"> 
     content 
    </div> 
    <div class="col-md-4 col-sm-12"> 
     sidebar 
    </div> 
    </div> 
</div>

Смотрите эту codepen сниппет для справки: http://codepen.io/anon/pen/VLoMML

Вы можете определить различные макеты для каждой из начальной загрузки поддерживаются различные размеры экрана, хз быть хорошим для мобильных телефонов, х быть хорошим для таблеток, мкр быть хорошим для экранов с обычным размером экрана и l для больших дисплеев. Документация действительно достаточно полная: http://getbootstrap.com/css/#grid

источник

2015-08-24 23:25:13 Pavlin

спасибо за чего другие классы экрана, я забыл о них. Однако вы все еще показываете «siderbar content sidebar content» для мобильного просмотра, где, как я хочу достичь «боковую панель боковых панелей контента» для мобильного просмотра –

Немного поразмыслив, я не думаю, что это возможно только при загрузке. Вы можете изменить порядок столбцов, но в пределах одной строки. Там работают классы push и pull, но я придумал пробел в вашей конкретной проблеме. – Pavlin

Я пробовал обернуть все в один класс 'row', вы думаете, что это сработает? Я еще не закончил. –

После нескольких попыток просто экспериментировать я нашел этот путь.

я решил удалить одну целую строку и выжимать все содержимое в col-sm-8 и все содержимое боковой панели в col-sm-4

<div class="col-sm-8"> 
content 
content 
</div> 
<div class="col-sm-4"> 
sidebar 
sidebar 
</div>

источник

2015-08-25 00:05:13

самозагрузки сетки для мобильного макете

ответ

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