2x col-xs-6 попадает в новую строку, а не делится строкой

Я играю с Bootstrap 4, и я пытаюсь выполнить прямолинейную задачу, 2x col-xs-6 внутри строки. Он подталкивает значения к новой строке: S.2x col-xs-6 попадает в новую строку, а не делится строкой

<div class="row"> 
    <div class="col-xs-6 col-sm-6"> 
      hehe 
    </div> 
    <div class="col-xs-6 col-sm-6"> 
      hehe 
    </div> 
</div>

Я также пробовал, но не повезло.

<div class="col-xs-12"> 
    <div class="col-xs-6 col-sm-6"> 
      hehe 
    </div> 
    <div class="col-xs-6 col-sm-6"> 
      hehe 
    </div> 
</div>

Вместо

| 6 | 6 |

Я получаю

|  12  | 
|  12  |

Они не должны работать? Что мне не хватает?

источник

2017-01-18 senty

Это ботстрап 4? Кроме того, я пытался сузить ширину моего браузера, а затем он попадает на 570 пикселей, он толкает их в 2 строки. – senty

В новейшей версии Bootstrap нет классов 'col-xs-'. Теперь вы должны использовать 'col-6' вместо' col-xs-6'. – makshh

@makshh Oh .. Большое спасибо! Сэкономил мне больше часов, чтобы потратить впустую ... – senty

-1

Контейнер <div class="col-..."> должен быть <div class="row">.

.row 
    .col-xs-6 
    .col-xs-6

Здесь нет документацию:
http://getbootstrap.com/css/#grid

источник

2017-01-18 00:36:40

Это не ответ. Я даже не использую bootstrap 3. Правильный ответ дается в комментариях. Я жалел, что вы нашли время, чтобы прочитать, может быть, не мой вопрос, но, по крайней мере, фрагменты ... Это показывает, что вы точно написали как ответ. – senty

col-xs-* больше не eixsts в bootstrap4. Вместо этого используйте col-6.

<div class="container"> 
<div class="row"> 
    <div class="col-6">.col-6</div> 
    <div class="col-6">.col-6</div> 
</div> 
</div>

http://v4-alpha.getbootstrap.com/examples/grid/

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

Так что это может быть немного запутанным, потому что документация по-прежнему относится к «xs», но это, вероятно, больше по отношению к точкам останова.

источник

2017-01-18 00:40:32 partypete25

Они обновили документацию, но не примеры. http://v4-alpha.getbootstrap.com/layout/grid/#grid-options – makshh

2x col-xs-6 попадает в новую строку, а не делится строкой

ответ

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