使用bootstrap的一些误解

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代码来自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>