Bootstrap 大列覆盖介质答案

【问题标题】：Bootstrap Large column overlay mediumBootstrap 大列覆盖介质
【发布时间】：2017-03-27 10:29:18
【问题描述】：

http://shoelace.io/#7f34fe76be20d73e7e28d03db5e311d4

<div class="container">
  <div class="row">
    <div class="col-md-6">A</div>
    <div class="col-md-6">B</div>
    <div class="col-lg-6">C</div>
    <div class="col-lg-6">D</div>
  </div>
</div>

鉴于上述结构，为什么C在中等分辨率上同时覆盖了B和A？

我所期待的：我所看到的：

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

Bootstrap col-x-* 属于媒体查询的类已删除从 col-x-* 类继承的所有 css。

之所以默认为全角，是not because of a design intention by bootstrap, but is the default behaviour for those divs.

这与他们的文档背道而驰，这表明它是回退到移动设备的有效方法。

如果您使用更大的类并希望它打破到全宽，则包含 col-xs-12 类是不可选的！

把代码改成

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6">A</div>
    <div class="col-xs-12 col-md-6">B</div>
    <div class="col-xs-12 col-lg-6">C</div>
    <div class="col-xs-12 col-lg-6">D</div>
  </div>
</div>

将解决问题，您无需指定 col-sm-12，因为 col-xs-12 将适用。

这是由于 bootstrap 没有将浮点数应用于自动扩展的 div（出于某种原因，我不确定）

https://github.com/twbs/bootstrap/issues/17998

https://github.com/twbs/bootstrap/issues/17603

【讨论】：

【解决方案2】：

使用

col-md-# for medium screen size

col-lg-# for large screen size

如果你想在所有屏幕尺寸中使用相同尺寸的元素，请改用相同的类

<div class="container">
  <div class="row">
    <div class="col-md-6">A</div>
    <div class="col-md-6">B</div>
    <div class="col-md-6">C</div>
    <div class="col-md-6">D</div>
  </div>
</div>

【讨论】：

【解决方案3】：

忽略颜色，它们仅用于演示目的。

.bg {
  height: 100px;
  border: 2px solid #000;
}

.bg-blue {
  background: #00A2E8;
}

.bg-yellow {
  background: #FFF200;
}

.bg-red {
  background: #ED1C24;
}

.bg-green {
  background: #22B14C;
}

<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-12 col-md-6 bg bg-blue"></div>
    <div class="col-xs-12 col-md-6 bg bg-yellow"></div>
    <div class="col-xs-12 col-lg-6 bg bg-red"></div>
    <div class="col-xs-12 col-lg-6 bg bg-green"></div>
  </div>

</div>

【讨论】：

如果您使用更高的类，我的假设是否不正确？
在旧版本中，会导致clearfix 问题。为了解决它，必须这样做。现在我不认为，它是必需的。现在在官方文档中找不到书面证明。但每当我得到它，一定会分享它。

【解决方案4】：

嗨，如果我理解正确的话。你想显示 2 对齐在顶部。 1 在这两个下面是全宽的，在另一个下面是全宽的。

如果这是我建议的问题：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6 col-lg-6">A</div>
    <div class="col-xs-12 col-md-6 col-lg-6">B</div>
    <div class="col-xs-12 col-md-12 col-lg-6">C</div>
    <div class="col-xs-12 col-md-12 col-lg-6">D</div>
  </div>
</div>

【讨论】：

您理解正确，但是您的答案似乎有额外的课程？有必要吗？
可能不会，但我大部分时间都把它们放在保险柜里。现在我知道它总是会做我想做的事。在彼此下方的小屏幕 4 上。中等大小的 2 个并排，2 个在下面，大的 2 排 2 个对齐