Question

我正在使用Bootstrap网格系统。行之间的间距太大。

如何减少它？

<div class="row">
  <div class="col-md-6">
    <h1 id="Heading"> Heading </h1>
    <div class="row" style="margin-left:6px;">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-12">
            <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span  </span> </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span  </span> </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span  </span> </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<div>

Answer 1

有两种快速解决方案：

编辑bootstrap core css / sass，这将是一个坏主意，因为它会影响页脚手架的核心功能。
写一个单独的类并将其添加到您的div中，例如：

.row-bottom-margin {margin-bottom：20px; }

您可以将其用作

<div class="row row-bottom-margin">

除非您真的希望将此更改应用于所有相关位置并考虑您未来的设计，否则不建议使用选项1.

希望这有帮助！

Answer 2

现在使用Bootstrap 4不再需要使用任何CSS，因为它有utility classes for this purpose。

Answer 3

在twitter bootstap中有一个默认的margin-bottom：15px属性设置在网格系统的各行之间。你可以删除这个属性或覆盖margin属性

    <div class= "row marginRow"></div>
Your Css    

  .marginRow{
   margin-bottom:0px !important; 
   }

或仅使用

删除任何保证金

    .marginRow{
     margin:0px !important; 
   }

Answer 4

默认情况下，行元素会扩展与其子项相关。所以你的问题不在.row类中，而是在#rect

中

在rect元素上，默认情况下bootstrap css的行高为1.4。把它变成一个类而不是id。

你可以将它减少到1.2 ... 在单独的css文件上执行并覆盖它。那对你来说是一个更好的设计。

 .rect {        
    line-height: 1.2; // overwrite it on a different css if you prefer        
}

减少行之间的间距

4 个答案: