bootstrap grid system не работает должным образом

Question

Я работаю над системой сетки бутстрапа.

Из моего понимания:

<div class="container"> 
    <div class="row"> 
    <div class="col"> 
    1 of 3 
    </div> 
    <div class="col-6"> 
     2 of 3 (wider) 
    </div> 
     <div class="col"> 
    3 of 3 
</div> 

должен показать:

1 из 3     2 из 3 (широкой)     3of3

, но когда я открыл это с Chrome, я вижу:

1 из 3
2 3 (шире)
3 из 3

Answer 1

Это потому, что вы не использовали собственный класс names.The имя класса должно быть как col-lg-6 или col-md-6 и так далее.

col-*-* Используется для ответной сетки (span 1-12 column). Малогабаритные устройства Телефоны (< 768px), Малые устройства Таблетки (≥768px), Средние устройства Настольные компьютеры (≥992px), Крупные устройства Настольные компьютеры (≥1200px). Значения столбцов могут быть 1-12.

---

вы получите полный список классов начальной загрузки и есть описание here

Попробуйте это:

<div class="container"> 
<div class="row"> 
    <div class="col-lg-3"> 
    1 of 3 
    </div> 
    <div class="col-lg-6"> 
    2 of 3 (wider) 
    </div> 
    <div class="col-lg-3"> 
    3 of 3 
    </div> 
</div> 
</div> 

Вот класс Demo