2016-03-02 1069 views
0

我想以正确的方式(不使用nbsp)在文本内容之间添加空白空间以在图像上显示,我该怎么做?Bootstrap - 内容之间的空行

image

的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;} 
+0

请看看css属性'边缘'和它一起玩:)也建议阅读[margin vs padding](http://stackoverflow.com/questions/2189452/when-to-use-margin-vs- padding-in-css)知道差异。花时间学习,好运! – nkmol

回答

1

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

个工作Codepen Example

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

干杯:)

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

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

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

0

请使用padding CSS属性。 Padding-top:"";padding-bottom:"";会很好。