我有两个 row a 和 row b,我发现这两个 row 之间的竖直方向的距离靠的有点近,我想调整 a 和 b 之间的距离,row 之前的水平距离可以通过 col-md-offset*调整,那竖直方向上的距离要怎么调整,谢谢!
<div class="row" id="a">
<img> ... </img>
<div>
<div class="row" id="b">
<button>..</button>
<div>
目前我是通过直接加一个空的 h1 标签,来拉开距离,感觉有点不太 rails.大家有更合适的方法吗?谢谢!
<div class="row" id="a">
<img> ... </img>
<div>
<h1></h1>
<div class="row" id="b">
<button>..</button>
<div>
可以自己在 css 中给top-offset
的 class 写个 margin,然后把这个 class 加到 row 后面覆盖 row 默认的 margin
正确的做法是
加多 CSS 标签。既不要针对 id 做样式,也最好不要轻易改动框架默认。
<div class="row top" id="a">
<div class="row bottom" id="b">
给新 CSS 标签设置样式
.top { margin-bottom: 10px; }
用 br 也是不可取的,如果你没有耗尽 CSS 的可能,就不要用 HTML 标签做样式。HTML 标签应该更多用在语义上。br 在这里没有任何语义。
#8 楼 @blacktulip 科普实在不敢当,只是个人使用 BS 很久 各种布局均做过 所以说一点自己的小看法。首先是 container、row、col-md-4、col-md-8(如果是 BS2,那么就是 span4、span8 这样来布),这是 bootstrap 代码规范,不要强加过多自定义 CSS 去调整,如果非要这样请书写至前 做出优先权去所谓的覆盖。如果非要反规范的去实现想法 请加 class 不要加 id。同时更加好的解决办法是 row 和 row 之间加一句清除浮动同时加 margin-bottom
<div class="clearfix" style="margin-bottom: 10px;"></div><!-- 清除浮动 -->
Bootstrap 在不同的 row 之间增加间距 带 row 样式的 div 是 bootstrap 里布局最常用的区域显示单位。但是默认 bootstrap 里 2 个带 row 的 div 之间是没有任何间隔的,在画表单的时候就会让表单各个输入框先得拥挤不堪。 解决方法 :在 css 里加入下面代码 .row-margin-top { margin-top: 20px; } 在每次写
的时候换成即可可以这样设置上下间距:
<div class="row my-1">
<div class="row my-2">
<div class="row my-3">
<div class="row my-4">
<div class="row my-5">
可以这样设置只有上间距:
<div class="row mt-1">
<div class="row mt-2">
<div class="row mt-3">
<div class="row mt-4">
<div class="row mt-5">
可以这样设置只有下间距:
<div class="row mb-1">
<div class="row mb-2">
<div class="row mb-3">
<div class="row mb-4">
<div class="row mb-5">
总结:数字越大,间距也越大。
.mb-1,
.my-1 {
margin-bottom: 0.25rem !important;
}
.ml-1,
.mx-1 {
margin-left: 0.25rem !important;
}
.m-2 {
margin: 0.5rem !important;
}
.mt-2,
.my-2 {
margin-top: 0.5rem !important;
}
.mr-2,
.mx-2 {
margin-right: 0.5rem !important;
}
.mb-2,
.my-2 {
margin-bottom: 0.5rem !important;
}
.ml-2,
.mx-2 {
margin-left: 0.5rem !important;
}
.m-3 {
margin: 1rem !important;
}
.mt-3,
.my-3 {
margin-top: 1rem !important;
}
.mr-3,
.mx-3 {
margin-right: 1rem !important;
}
.mb-3,
.my-3 {
margin-bottom: 1rem !important;
}
.ml-3,
.mx-3 {
margin-left: 1rem !important;
}
.m-4 {
margin: 1.5rem !important;
}
.mt-4,
.my-4 {
margin-top: 1.5rem !important;
}
.mr-4,
.mx-4 {
margin-right: 1.5rem !important;
}
.mb-4,
.my-4 {
margin-bottom: 1.5rem !important;
}
.ml-4,
.mx-4 {
margin-left: 1.5rem !important;
}
.m-5 {
margin: 3rem !important;
}
.mt-5,
.my-5 {
margin-top: 3rem !important;
}
.mr-5,
.mx-5 {
margin-right: 3rem !important;
}
.mb-5,
.my-5 {
margin-bottom: 3rem !important;
}
.ml-5,
.mx-5 {
margin-left: 3rem !important;
}
个人理解:
同理: