Некоторые недоразумения с помощью начальной загрузки

Question

У меня есть этот HTML код:

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

В представлении я получаю следующий результат:

Желаемый результат вид является:

Код HTML выше I t ook из этого site.

Любая идея, почему мой взгляд отличается от нужного вида?

Answer 1

Он будет работать если вы получили достаточно ширины для них

Bootstrap DoC#grid-options:

Средние устройства Рабочие столы (≥992px)

Измените размер окна или попытаться использование

<div class="col-sm-1"> 

https://jsfiddle.net/u8w7fca6/3/

Answer 2

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

Answer 3

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

<div class="row"> 
    <div class="col-xm-12 col-sm-1 col-md-1 col-lg-1"> 
    <p>Try this</p> 
    </div> 
</div>