Bootstrap大型柱覆盖介质

时间:2017-03-23 07:14:18

标签: twitter-bootstrap twitter-bootstrap-3

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?

我的期望: What I was expecting: 我所看到的: enter image description here

4 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

使用

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>

答案 2 :(得分:0)

嗨,如果我理解正确的话。你想在顶部显示2对齐。在这两个之下满1个并且在另一个之下满宽度。

如果这是问题我会建议:

V get(Object key);

答案 3 :(得分:0)

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

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

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

.bg-yellow {
  background: #FFF200;
}

.bg-red {
  background: #ED1C24;
}

.bg-green {
  background: #22B14C;
}
&#13;
<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>
&#13;
&#13;
&#13;