twitter-bootstrap – Bootstrap 3.0:响应列重置文档部分

栏目: CSS · 发布时间: 5年前

内容简介:翻译自:https://stackoverflow.com/questions/19172397/bootstrap-3-0responsive-column-resets-section-of-the-documentation

嘿,所以在bootstrap 3.0文档中,如果您查看副标题“响应列重置”,它会说如下:

“With the four tiers of grids available you’re bound to run into issues where, at certain breakpoints, your columns don’t clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.”

现在他们的意思是什么?我认为花车清除 – 或没有 – 基于宽度.我在这里想念的是什么?

我相信 http://getbootstrap.com/css/#grid-responsive-resets

上的例子是错误的,没有说明问题.

http://getbootstrap.com/css/#grid-responsive-resets 上的示例不能直观地说明问题.

your columns don’t clear quite right as one is taller than the other

示例没有clearfix:

<div class="row">
  <div class="col-xs-6 col-sm-3" style="background-color:red;height:40px;">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3" style="background-color:blue;">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3" style="background-color:green;">.col-xs-6 .col-sm-3 (left)</div>
  <div class="col-xs-6 col-sm-3" style="background-color:yellow;">.col-xs-6 .col-sm-3 (right)</div>
</div>

在第一列(红色)较高的超小(xs)上,第二列(蓝色)将导致第三(绿色)列浮动在第一列的右侧.

没有clearfix

与clearfix

<div class="row">
  <div class="col-xs-6 col-sm-3" style="background-color:red;height:40px;">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3" style="background-color:blue;">.col-xs-6 .col-sm-3</div>
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-3" style="background-color:green;">.col-xs-6 .col-sm-3 (left)</div>
  <div class="col-xs-6 col-sm-3" style="background-color:yellow;">.col-xs-6 .col-sm-3 (right)</div>
</div>

山坳 – * – 12

当您在一行中添加更多12列并且其中一行应为100%(col – * – 12)时,也会出现此问题.

考虑这种情况:

在你想要的更大的网格上:

1 | 2 | 3

在你想要的xs网格上:

1 | 2
  3

你可以用以下方法完成上述任务

Without clearfix:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4">1</div>
<div class="col-xs-6 col-sm-4">2</div>
<div class="col-xs-12 col-sm-4" style="background-color:red;">3</div>
</div>
</div>

红色背景将显示最后一列与第一列重叠.添加clearfix将删除此背景:

With clearfix:  
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4">1</div>
<div class="col-xs-6 col-sm-4">2</div>
<!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>
<div class="col-xs-12 col-sm-4" style="background-color:red;">3</div>
</div>
</div>

结果:

提到的重叠将由col-12- *类引起没有浮动,参见: https://github.com/twbs/bootstrap/issues/10152

https://github.com/twbs/bootstrap/issues/10535 ,您将找到另一个插图. This fiddle 显示了clearfix如何解决问题.注意<div class =“col-sm-3”>这里没有col-12- *.在xs网格列上默认为100%并且没有浮点数,因此col-xs-12- *的行为与xs网格上的非类相同.

翻译自:https://stackoverflow.com/questions/19172397/bootstrap-3-0responsive-column-resets-section-of-the-documentation


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

长尾理论

长尾理论

[美]克里斯·安德森 / 中信出版集团股份有限公司 / 2015-8-1 / 59.00元

互联网时代,大众市场不再一统天下,小众市场也可以呼风唤雨。 在《长尾理论》一书中,克里斯·安德森详细阐释了长尾的精华所在,指出商业和文化的未来不在于传统需求曲线上那个代表“畅销商品”的头部,而是那条代表“冷门商品”的经常被人遗忘的长尾。尽管我们仍然对热门商品着迷,但它们对消费者的吸引力已经大不如从前,因为市场已经大大分化。黄金电视节目的收视率几十年来一直在萎缩,若是在七八十年代,现在的一档最......一起来看看 《长尾理论》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具