使用引导程序在 HTML 中进行换行的最佳实践答案

【问题标题】：best practice to do line breaks in HTML with bootstrap使用引导程序在 HTML 中进行换行的最佳实践
【发布时间】：2016-09-22 23:49:56
【问题描述】：

我需要换行，但我不想在我的 html 上使用 <br> 标签。

所以我尝试使用：<div class="clearfix"></div>

http://v4-alpha.getbootstrap.com/components/utilities/#clearfix

但没用。

基本上我只想要一个空行来分隔我的 div。

例如：

<div class="col-md-12">
    <button type="button" ng-show="versions" class="btn">
      copy link<i class="fa-link"></i>
    </button>
</div>
<div class="clearfix"></div>
<div class="col-md-12">
    <button type="button" ng-show="versions" class="btn">
      copy link<i class="fa-link"></i>
    </button>
</div>

有什么建议吗？

谢谢

【问题讨论】：

你可以使用CSS间距//margin来增加div之间的空间吗？
“我想要一个空行，但我不想使用表示空行的标签”？

标签： html css twitter-bootstrap

【解决方案1】：

只需使用底部边距...这就是它的用途。

.col-md-12 {
    margin-bottom:1em;
}

.col-md-12 {
  margin-bottom: 1em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12">
  <button type="button" ng-show="versions" class="btn">
    copy link<i class="fa fa-link"></i>
  </button>
</div>
<div class="clearfix"></div>
<div class="col-md-12">
  <button type="button" ng-show="versions" class="btn">
    copy link<i class="fa fa-link"></i>
  </button>
</div>

【讨论】：