CSS 减少行间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23261642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reduce spacing between rows
提问by user3026519
I am using Bootstrap grid system. The spacing between rows is too large.
我正在使用 Bootstrap 网格系统。行间距过大。
How can I reduce it?
我怎样才能减少它？
<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>
回答by Soman Dubey
There are 2 quick solutions possible for this:
有两种可能的快速解决方案：
- Edit bootstrap core css/sass which will be a bad idea as it will affect core functionality of page scaffolding.
- Write a separate class and add it in your div for ex:
- 编辑 bootstrap core css/sass 这将是一个坏主意，因为它会影响页面脚手架的核心功能。
- 编写一个单独的类并将其添加到您的 div 中，例如：
.row-bottom-margin { margin-bottom:20px; }
.row-bottom-margin { margin-bottom:20px; }
and you can use it as
你可以用它作为
<div class="row row-bottom-margin">
Option 1 is not suggested until unless you are really looking for this change to be applied at all the relevant places and do consider your future designs.
除非您真的希望在所有相关位置应用此更改并考虑您未来的设计，否则不建议使用选项 1。
Hope this helps!
希望这可以帮助！
回答by tom
Using Bootstrap 4 now you no more need to use any CSS for this as it has utility classes for this purpose.
现在使用 Bootstrap 4，您不再需要为此使用任何 CSS，因为它具有用于此目的的实用程序类。
回答by ShinyJos
In twitter bootstap there is a default margin-bottom:15px property set between rows of the grid system.You can remove this property or overwrite the margin property
在 twitter bootstap 中，在网格系统的行之间设置了一个默认的 margin-bottom:15px 属性。您可以删除此属性或覆盖 margin 属性
<div class= "row marginRow"></div>
Your Css
.marginRow{
margin-bottom:0px !important;
}
or just remove any margin present using
或者只是使用删除任何存在的边距
.marginRow{
margin:0px !important;
}
回答by Yagiz Ozturk
By default, row elements expands in related to their childs. So your problem is not in .row class but in #rect
默认情况下，行元素与其子元素相关地展开。所以你的问题不在 .row 类中，而是在 #rect
On rect element you have a line-height of 1.4 by default bootstrap css. Make it a class rather than id.
在 rect 元素上，默认引导 css 的行高为 1.4。使它成为一个类而不是 id。
You can reduce it to 1.2 for your case... Do it on a separate css file and overwrite it. That would be a better design for you.
对于您的情况，您可以将其减少到 1.2... 在单独的 css 文件上执行并覆盖它。那对你来说会是一个更好的设计。
.rect {
line-height: 1.2; // overwrite it on a different css if you prefer
}
