在Bootstrap中创建边距

时间:2017-08-02 21:59:28

标签: html css twitter-bootstrap css3

我正在学习Bootstrap的基础知识,而且在创建边距方面我很困难。我想在引号和缩略图之间留出空格。我查找了教程,甚至搜索了Stack溢出,并没有找到解决方案。好像所有元素都粘在了一起。有人可以告诉我创建保证金需要做些什么吗?提前致谢。

<div>
   <h1 class = 'text-center'> Bob Dylan </h1>
   <img width = '80%' class = 'img-responsive center-block' src ="http://www.billboard.com/files/media/bob-dylan-portrait-bw-1966-billboard-1548.jpg" alt = 'Bob Dylan'></img>
   <h3 class = "text-center">". . . he not busy being born is busy dying."</h3>
</div>

<div class = 'row'>
   <div class="col-xs-2">
       <a href = "https://en.wikipedia.org/wiki/Bob_Dylan_(album)"><img width = "100%" src = 'https://upload.wikimedia.org/wikipedia/en/thumb/6/60/Bob_Dylan_-_Bob_Dylan.gif/220px-Bob_Dylan_-_Bob_Dylan.gif'></a>
        <p class = 'center-block'> 1962 </p>
   </div>

https://codepen.io/jwdwsn/pen/awaGdv

1 个答案:

答案 0 :(得分:1)

要解决此问题,请创建一个新的“底部边距”类,以添加您需要的标准边距。

.bottom-margin { margin-bottom:30px; }

然后在引号div之后添加一个div,如下所示

<div class = "row bottom-margin">
   <div class = "col-md-12">
   </div>
 </div> 

我试过了。

希望这有帮助。