Question

在我看来，bootstrap 3有一个缺陷，就是不能在不是流体容器的容器内正确使用.col-xs-*列。

要证明我的意思，请查看此jsfiddle并将视图缩小到xs大小（低于768px）。

样本

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

.container {
  background: grey;  
}
  .col-md-3 {
   border-left: 1px solid blue;
  }
p {
     background: whitesmoke;
   }

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-md-3 col-xs-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam eos voluptas repellat, culpa debitis minus odio officia, magni fugiat voluptatem soluta laudantium quam, accusamus quisquam, a aspernatur impedit veniam dolor.</p>
    </div>
    <div class="col-md-3 col-xs-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam eos voluptas repellat, culpa debitis minus odio officia, magni fugiat voluptatem soluta laudantium quam, accusamus quisquam, a aspernatur impedit veniam dolor.</p>
    </div>
    <div class="col-md-3 col-xs-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam eos voluptas repellat, culpa debitis minus odio officia, magni fugiat voluptatem soluta laudantium quam, accusamus quisquam, a aspernatur impedit veniam dolor.</p>
    </div>
    <div class="col-md-3 col-xs-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam eos voluptas repellat, culpa debitis minus odio officia, magni fugiat voluptatem soluta laudantium quam, accusamus quisquam, a aspernatur impedit veniam dolor.</p>
    </div>
  </div>
</div>

你可以看到网格在两个元素之间的加倍，加上一个30px的装订线，同时在元素和左右两侧的15px容器之间有一个装订线。

30px是正常的，我理解这是因为两个填充都加起来了。

但是例如在lg范围内，引导容器的max-width为1170px。这是通过媒体查询完成的，窗口大小为1200px且更宽。之后，最大宽度再次调整为容器的970px。

这实际上意味着您的容器将始终留有30px个房间（1200 - 1170）。之后，容器再次使用970 max-width值缩小。

这个概念有点'假装'不存在的排水沟，但是当你不能再在容器上设置max-width并且容器的宽度为100%时，这种方法就不起作用了在移动规模上。

我希望很清楚我的意思。这让我想知道col-xs-*列是否曾被用于不是流体容器的容器内。

如果我想要一个容器内的两个col-xs-6列并且具有均匀间隔的排水沟，那么处理此问题的最佳方法是什么？甚至间隔：

容器和第一列
第一列和第二列
第二列和容器

容器内的Bootstrap 3 col-xs列

0 个答案: