Stacking Bootstrap Столбцы друг над другом

Я использую Bootstrapv3 для разработки моего интерфейса.
Я использую следующий фрагмент:Stacking Bootstrap Столбцы друг над другом

<div class="row"> 
     <div class="col-sm-4 col-xs-4"> 
      <h1>Hello...!</h1> 
      <p>Para 1</p> 
     </div> 
     <div class="col-sm-8 col-xs-8"> 
      <h1>new div</h1> 
      <p>Para 2</p> 
     </div> 
    </div>

Однако, когда я уменьшить размер (ширина) браузер, столбцы становятся все меньше и меньше.
Я хочу, чтобы после определенного предела или минимальной ширины divs должны складываться друг над другом, а не уменьшаться.

источник

2013-11-07 Vikas Raturi

Можете ли вы быть более конкретную информацию о размере экрана? как на каком экране вы хотите, чтобы он ворвался в стеки? как ноутбук, планшет вперед или дальше? –

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

<div class="col-sm-4 col-xs-4" >

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

<div class="col-md-4">

вместо хз (Xtra маленький) и см (малый размер), используйте средний размер по умолчанию, загрузчик будет делать остальную часть вашей работы. И еще одно, для ваших столбцов (4 и 8) есть два разных размера, представление будет нерегулярным. И еще одна вещь, если вы хотите продолжать использовать пользовательские размеры для столбцов, а не мой метод, помните: хз-4 отличается в см-4

источник

2013-11-07 05:23:07

Удивительный! Сейчас я искал это решение. – mur7ay

В самозагрузки-3 «префикс класса» представляет следующим образом:

.col-хз - Дополнительные маленькие устройства - телефоны (< 768px)

.col-см - небольшие устройства - таблетки (≥768px)

.col-й мкр - Высоковольтное устройство - Рабочие столы (≥992px)

.col- LG - Большие устройства Desktops (≥1200px)

В вашем кодировании (вы спрашиваете для настольной версии я так думаю ...), вы должны удалить class="col-sm-8 col-xs-8" и добавить class="col-md-8 col-lg-8"

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

источник

2013-11-07 06:26:32 BobDroid

Просто удалите без штабелирования 'Col-xs- *' класс сетки ..

<div class="row"> 
    <div class="col-sm-4"> 
    <h1>Hello...!</h1> 
    <p>Para 1</p> 
    </div> 
    <div class="col-sm-8"> 
    <h1>new div</h1> 
    <p>Para 2</p> 
    </div> 
</div>

Демо: http://bootply.com/92512

источник

2013-11-07 15:43:09 ZimSystem

Stacking Bootstrap Столбцы друг над другом

ответ

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