Question

我的主页包含多个块（顶部/中部/底部）。我为每个块创建了一行。我想在Bootstrap中的块之间添加一些空格。我可以简单地给我的行ID并添加一些余量，或者这是错误的吗？

我的代码结构：

<div class="container" id="ho_main_content">
    <div class="row">
        <div class="col-md-12 text-center"></div>
    </div>
    <div class="row">
        <div class="col-md-12"></div>
    </div>
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

Answer 1

我的这个“答案”应该是一个评论;但是，我没有足够的代表。

对于答案，是的，给那些带有row类的div另一个类，可能是这样的，将每个10px的顶部和底部隔开：

.part { margin: 10px 0; }

使用像bootstrap这样的框架时要考虑的重要一点是，如果修改组件或间距或其他东西，它不是世界末日。有些东西看起来不像你想要的那样;只要给他们额外的课程，或者如果你是绝望的，请使用!important标志。毕竟，它建立在相同的技术之上。

Answer 2

/*you can create your own custom css for use here is some example*/
.border {
  border: 1px solid red; /* just to make sure space between blocks*/
}

.margin-top {
  margin-top: 5px; 
}
   
.nopad{
 padding:0 ; 
}
div[class*='spacer-'] { display: block; }
.spacer-mini { height: 20px; }
.spacer-small { height: 40px; }
.spacer-medium { height: 60px; }
.spacer-big { height: 100px; }

<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container" id="main_content">
  <div class="row border margin-top">
<div class="col-md-12 text-center">text1</div>
  </div>
  <div class="row border  margin-top">
<div class="col-md-12">text2</div>
  </div>

<div class="spacer-mini"></div> <!-- Using Spacer-Mini and avoiding the margin top -->

  <div class="row">
<div class="col-md-6 col-xs-6 border">part1</div>
<div class="col-md-6 col-xs-6 border">part2</div>
  </div>
</div>
</body>

如何在块Bootstrap之间设置更多空间？

2 个答案: