Ruby China

新手问题 bootstrap row 之间的竖直方向的距离要怎么调整？

wcc526 · 2014年06月19日 · 最后由 amoschen 回复于 2019年10月30日 · 90670 次阅读

我有两个 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>
martin91 #1 2014年06月19日

自己设置 margin 呗

ikunsam #2 2014年06月19日

可以自己在 css 中给top-offset的 class 写个 margin，然后把这个 class 加到 row 后面覆盖 row 默认的 margin

ericguo #3 2014年06月20日 
.row {
  margin-top: 4px;
  margin-bottom: 4px;
}
hlt #4 2014年06月20日

bootstrap 压根也不是你这么用的

qichunren #5 2014年06月20日

做这个我第一件事想到的就是去 bootstrap 中定义变量的文件中去找关于 row 间隔的变量，然后修改。

ericguo #6 2014年06月20日

#5 楼 @qichunren 我检查了，没有定义，我这个是正解。

wcc526 #7 2014年06月20日

#6 楼 @ericguo 谢谢！我还是不太想破坏 bootstrap 原先的定义，我个人还是比较喜欢直接加 br 标签。

blacktulip #8 2014年06月21日

#4 楼 @hlt 求科普，bootstrap 应该怎么用？

billy #9 2014年06月21日

正确的做法是

  1. 加多 CSS 标签。既不要针对 id 做样式，也最好不要轻易改动框架默认。

    <div class="row top" id="a">
<div class="row bottom" id="b">

  2. 给新 CSS 标签设置样式

    .top { margin-bottom: 10px; }

用 br 也是不可取的，如果你没有耗尽 CSS 的可能，就不要用 HTML 标签做样式。HTML 标签应该更多用在语义上。br 在这里没有任何语义。

1 个赞
ericguo #10 2014年06月21日

#9 楼 @billy 同意你的中间路线 😄

hlt #11 2014年06月21日

#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><!-- 清除浮动 -->

1 个赞
yejiaxiang #12 2017年05月09日

Bootstrap 在不同的 row 之间增加间距 带 row 样式的 div 是 bootstrap 里布局最常用的区域显示单位。但是默认 bootstrap 里 2 个带 row 的 div 之间是没有任何间隔的，在画表单的时候就会让表单各个输入框先得拥挤不堪。 解决方法 :在 css 里加入下面代码 .row-margin-top { margin-top: 20px; } 在每次写

的时候换成即可
Django_beginner #13 2019年07月20日

  1. 可以这样设置上下间距：

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

  2. 可以这样设置只有上间距：

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

  3. 可以这样设置只有下间距：

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

个人理解：

  1. mb：代表 Margin Bottom（只有下间距）；
  2. mt：代表 Margin Top（只有上间距）；
  3. my：Margin Y 轴（上下都有间距）；

同理：

  1. ml：代表 Margin Left（只有左间距）；
  2. mr：代表 Margin Right（只有右间距）；
  3. mx：Margin X 轴（左右间距都有的啦......）；
  • 加油！祝你成功！！！
1 个赞
amoschen #14 2019年10月30日
对 Django_beginner 回复

特地注册感谢您😍

需要 登录 后方可回复, 如果你还没有账号请 注册新账号