Bootstrap - 内容之间的空行答案

【问题标题】：Bootstrap - empty lines between contentBootstrap - 内容之间的空行
【发布时间】：2016-03-02 20:47:36
【问题描述】：

我想以正确的方式（不使用 nbsp）在文本内容之间添加空格以在图像上看起来像，我该怎么做？

Index.html

    <div class="container-fluid" id="home">
<div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-5"></div>
        <div class="col-md-7">
               <h1>Text A</h1>
               <h1>Text B</h1>
               <h1>&nbsp;</h1><h1>&nbsp;</h1><h1>&nbsp;</h1><h1>&nbsp;</h1>
               <h1>Text after space</h1>
               <h1>&nbsp;</h1>
               <h1>&nbsp;</h1>
               <h1>Example</h1>
               <h1>Second examplei</h1>
        </div>
      </div>
    <div class="col-md-4"></div>
  </div>
</div>
</div>

CSS

h1{
margin: 0px;
padding: 1px 0;
line-height:1;
font-size: 28px;}

【问题讨论】：

请查看css属性margin并使用它:)也建议阅读margin vs padding以了解区别。花点时间学习，祝你好运！

标签： html css twitter-bootstrap

【解决方案1】：

你可以用一些简单的 CSS 填充来解决它

工作Codepen Example

 .spacer {
     padding-top: 80px;
     padding-bottom: 40px
 }

干杯:)

【讨论】：

【解决方案2】：

.space { margin:0; padding:0; height:50px; } // height as desired

<div class="space"></div>

您可以替换此代码而不是 <h1>&nbsp;</h1>

【讨论】：

【解决方案3】：

请使用padding css 属性。 Padding-top:""; padding-bottom:""; 可以。

【讨论】：