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

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

我有两个 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>

自己设置 margin 呗

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

.row {
  margin-top: 4px;
  margin-bottom: 4px;
}

bootstrap 压根也不是你这么用的

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

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

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

#4 楼 @hlt 求科普,bootstrap 应该怎么用?

正确的做法是

  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 在这里没有任何语义。

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

#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; } 在每次写

的时候换成即可
  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 轴(左右间距都有的啦......);
  • 加油!祝你成功!!!

特地注册感谢您😍

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