css - 减少行间距

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

对此有 2 种可能的快速解决方案:

1. 编辑 Bootstrap 核心 css/sass，这不是一个好主意，因为它会影响页面脚手架的核心功能。
2. 编写一个单独的类并将其添加到您的 div 中，例如:

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

你可以把它当作

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

不建议使用选项 1，除非您真的希望在所有相关位置应用此更改并考虑您 future 的设计。

希望这对您有所帮助!