为什么在 Bootstrap 的 xs-viewport 上拆分列？答案

【问题标题】：Why are the columns splitted on xs-viewport in Bootstrap?为什么在 Bootstrap 的 xs-viewport 上拆分列？
【发布时间】：2017-10-21 10:40:57
【问题描述】：

我正在尝试理解 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 上的结果：

with border-css

without border-css

有人能告诉我我在这里缺少什么吗？ 2-8-2 工作正常，但 1-11 不工作。

我正在使用最新版本的 Firefox + 我正在使用 Bootstrap 版本 3，不是 4。

编辑 1：

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

【问题讨论】：

您发布的代码完美运行，所以它必须是别的东西，例如CSS 中的其他规则。
感谢您的回答。这实际上是我使用的唯一 css。会不会和这条线有关？（编辑 1）
抱歉，我的尺寸不够小 :) 我现在看到了。我知道为什么会这样，我会在一分钟内发布答案......

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

问题是 cols 有 15px 的左右填充，所以即使它是空的，col 也不能小于 30px。

通常您会在最小屏幕上重新分配列，以便为最小的列分配更多空间，例如

  <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>

（请注意，由于某种原因，媒体查询在 sn-p 中不起作用，但此代码在独立的 html 页面中确实有效！）

【讨论】：