Bootstrap 3 - 小屏幕上的列顶部边距
Posted
技术标签:
【中文标题】Bootstrap 3 - 小屏幕上的列顶部边距【英文标题】:Bootstrap 3 - Column top margin on smaller screens 【发布时间】:2014-05-09 16:40:52 【问题描述】:我有一行有 X 个可能的列。
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<!-- ... and so on ... -->
</div>
</div>
现在我想将margin-top:20px
添加到所有小屏幕列,并为大屏幕列添加相同的边距,如果超过 4 个,因为这会导致显示两个“行”,因此需要一些空间.
仅使用 CSS 是否有可能?
【问题讨论】:
首先,一行中不能有任意数量的列,如您所愿。一行中所有列类的总和必须为 12。 getbootstrap.com/css/#grid-example-basic 不是真的@MiljanPuzović,一旦空间用完,列就会开始换行。否则一排满是col-xs-12
怎么办?
这正是 bootstrap 的创建者的意图。
链接错误:getbootstrap.com/css/#grid-example-mixed.
不,对于您之前的问题,我发布了错误的链接。检查标记并计算数字。如果您正在编写完全响应式的代码,即。充分利用 bootrap 的 css 中的所有断点,所有大尺寸以下的列数加起来会超过十二个。在这种情况下,列将简单地开始一个新行。按照设计。
【参考方案1】:
这个简单的解决方案会自动为除第一列之外的所有列应用上边距,在超小屏幕尺寸下。不需要特殊的类名或对 html 或 CSS 进行其他修改。 (将下面的 margin-top
值更改为您喜欢的任何值。)
@media (max-width: 767px)
[class*="col-"]:not(:first-child)
margin-top: 30px;
【讨论】:
【参考方案2】:我使用这个简单而干净的解决方案:
.row margin-top: -15px;
.row > div margin-top: 15px;
这样,每个<div class='col-*-*'>
顶部都有 15px 的边距,第一行除外(或者,在移动设备上,顶部的除外)。
【讨论】:
【参考方案3】:这是一个旧帖子,但下面是一个干净的解决方案。
[class*="col-"]
margin-bottom: 15px;
这在某些情况下效果很好,但在不需要时会增加额外的、不必要的边距。
为了解决这个问题,我们可以创建一个新的 css 类,当它们堆叠时将顶部边距应用于列。我创建了一个名为.row-grid
的类
.row.row-grid [class*="col-"] + [class*="col-"]
margin-top: 15px;
@media (min-width: 1200px)
.row.row-grid [class*="col-lg-"] + [class*="col-lg-"]
margin-top: 0;
@media (min-width: 992px)
.row.row-grid [class*="col-md-"] + [class*="col-md-"]
margin-top: 0;
@media (min-width: 768px)
.row.row-grid [class*="col-sm-"] + [class*="col-sm-"]
margin-top: 0;
【讨论】:
【参考方案4】:我需要类似的东西,以下是我想出的解决方案。为未来的读者(和我自己)记录它
$res-list: (xs: (0px, 767px), sm: (768px, 991px), md: (992px, 1199px), lg: (1200px, 9999px));
$dir-list: (t: top, r: right, b: bottom, l: left);
@for $r from 1 through 10
@each $res-abbr, $res-vals in $res-list
@media (min-width: nth($res-vals, 1)) and (max-width: nth($res-vals, 2))
@each $dir-abbr, $dir-name in $dir-list
$x: $r * 5;
.m#$dir-abbr-#$res-abbr-#$x
margin-#$dir-name: #$xpx;
.m#$dir-abbr-#$res-abbr-#$rp
margin-#$dir-name: #$runquote('%');
此 SASS 代码按照以下方式生成类
@media (min-width: 0px) and (max-width: 767px)
.mt-xs-5 margin-top: 5px;
.mt-xs-1p margin-top: 1%;
.mr-xs-5 margin-right: 5px;
.mr-xs-1p margin-right: 1%;
.mb-xs-5 margin-bottom: 5px;
.mb-xs-1p margin-bottom: 1%;
.ml-xs-5 margin-left: 5px;
.ml-xs-1p margin-left: 1%;
因此内容编辑器可以使用.mt-xs-10
将margin-top: 10px
应用于extra-small
屏幕上的给定元素。
我希望它对某人有所帮助。
【讨论】:
应该祝贺您将一项简单的任务过度复杂化。 我不认为它过于复杂,而是赋予内容编辑者权力。想想生成的 CSS 规则的使用。 有趣的资源,对于小型项目,它过于复杂,但对于较大的项目(重复的简单任务),它更聪明,更简单。【参考方案5】:您可以随时使用媒体查询来获取上边距。
@media (max-width: 767px)
.col-xs-6
margin-top:20px;
http://www.bootply.com/126007
附: - .col-*
在.row
中的总数超过 12(即:http://getbootstrap.com/css/#grid-example-mixed)并没有错。它只会导致换行。文档中有几个使用此技术的示例。它通常不适合嵌套行。
【讨论】:
媒体查询不应该是“max-width: 767px”吗,因为 Bootstrap 3 的 .col-sm 适用于“≥768px”? 我可能是唯一一个认为应该有更好的解决方案(保证金等级***.com/a/20096216/2219831)的人。为了在项目之间添加垂直空间,内容编辑器必须编辑 CSS。也可能存在并非所有堆叠元素都需要垂直间距的情况。 是的,margin 类也可以工作,并且在即将到来的 Bootstrap 4 中有类似的东西。但是,margin 类不适用于像这个解决方案这样的特定网格层/断点。通常内容包含在另一个元素(即:)中,该元素也将提供间距。
以上是关于Bootstrap 3 - 小屏幕上的列顶部边距的主要内容,如果未能解决你的问题,请参考以下文章
Bootstrap 3“btn-group”在小屏幕上的无响应行为