为什么在Bootstrap中的上的列是分开的？

Question

我正试图理解Bootstrap，然而-我不明白为什么这不适用于xs。我一共有12列，但它仍然把col-xs-11放在col-xs-1下面。

CSS:

[class^="col-"] {
  height: 20px;
  background-color: #563d7c;
  background-color: rgba(86,61,124,.35) !important;
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.6);
}

.row {
  margin-top: 15px;
  margin-bottom: 15px;
}

HTML:

  <div class="container">
      <div class="row">
        <div class="col-xs-1">1</div>
        <div class="col-xs-11">11</div>
      </div>
      <div class="row">
        <div class="col-xs-2">2</div>
        <div class="col-xs-8">8</div>
        <div class="col-xs-2">2</div>
      </div>
  </div>

在xs:上的结果

使用边界-css

无边界-css

有人能告诉我我在这里错过了什么吗？2-8-2运行正常，但1-11不正常。

我正在开发Firefox +的最新版本，我使用的是引导版本3，而不是4。

编辑1:

<meta name="viewport" content="width=device-width,initial-scale=1.0"/> 

Answer 1

所发生的事情是，基于其填充和内容，您的col-xs-1列达到了最小宽度，不能再变小了。这意味着col-xs-11没有足够的空间，正被推送到下一行。

问题是，科尔有15便士左&右填充，所以，即使它是空的，你不能走任何小于30便士。

通常，你会在最小的屏幕上重新分配科尔，以便为最小的科尔分配更多的空间。

  <div class="row">
    <div class="col-xs-2 col-s-1">1</div>
    <div class="col-xs-10 col-s-11">11</div>
  </div>

但是，如果这不是一个选项，您可以使用媒体查询来调整较小屏幕的填充，例如：

​

[class^="col-"] {
  height: 20px;
  background-color: #563d7c;
  background-color: rgba(86,61,124,.35) !important;
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.6);
}

.row {
  margin-top: 15px;
  margin-bottom: 15px;
}

@media (max-width: 400px){
   [class^="col-"] {
        padding-left:5px; 
        padding-right:5px; 
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


  <div class="container">
  <div class="row">
    <div class="col-xs-2 col-s-1">1</div>
    <div class="col-xs-10 col-s-11">11</div>
  </div>
      <div class="row">
        <div class="col-xs-1">1</div>
        <div class="col-xs-11">11</div>
      </div>
      <div class="row">
        <div class="col-xs-2">2</div>
        <div class="col-xs-8">8</div>
        <div class="col-xs-2">2</div>
      </div>
  </div>

​

(请注意，由于某些原因，媒体查询在代码段中不起作用，但这段代码确实在独立的html页面中工作！)