减少行之间的间距

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

有两种快速解决方案:

1. 编辑bootstrap core css/sass这将是一个坏主意,因为它会影响页脚手架的核心功能.
2. 写一个单独的类并将其添加到您的div中为ex:

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

你可以用它作为

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

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

希望这可以帮助!

Answer 2

默认情况下，行元素与其子元素相关地展开。所以你的问题不在 .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        
}