Twitter bootstrap Bootstrap大列覆盖介质

A.
B
C
D

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

我所期待的是： 我看到： 使用

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>

A.
B
C
D

您好，如果我理解正确的话。你想在顶部显示2个alligned。在这两个下面和那两个下面各有一个全宽的

如果这是问题所在，我建议：

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

A.
B
C
D

忽略颜色，它们只是为了演示

.bg{
高度：100px；
边框：2倍实心#000；
}
.bg蓝色{
背景：#00A2E8；
}
.bg黄色{
背景#FFF200；
}
.bg红色{
背景：#ED1C24；
}
.bg绿色{
背景：#22B14C；
}

---

属于媒体查询的引导col-x-*类删除了从col-x-*类继承的所有css

它们默认为全宽的原因是

这与他们的文档背道而驰，他们的文档认为这是一种回归移动的有效方法

如果您使用的是更大的类，并且希望将其扩展到全宽，那么包含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>

A.
B
C
D

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

这是由于引导未将浮动应用于自动扩展的div（无论出于何种原因，我不确定）

---

我的假设是，如果您使用的是更高的类，您不需要指定col-xs-12，这是不正确的吗？在旧版本中，会出现

clearfix

问题。为了解决这个问题，必须这样做。现在我不认为这是必须的。现在在官方文件中找不到书面证据。但每当我得到它，我肯定会分享它。你理解正确，但你的答案似乎有额外的课程？它们是必要的吗？也许不是，但我把它们放在大部分时间里是为了保险。现在我知道它会一直做我想做的事。在小屏幕4上，在彼此下方。中号的2个相邻，2个在下面，大号的2排，2个联排

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