Question

我使用Bootstrap 3，我有一系列按钮。其中一个是<a>按钮，或：<a class='btn btn-default' role='button'>Button here</a>;其余的是具有相同类的<button>个元素。

我希望所有这些都正确对齐和间隔，如Bootstrap's examples所示，但结果是：

如您所见，第一个按钮，指定为<a>的按钮与下一个按钮没有正确的边距。可能导致这种情况的原因是什么？

这是我的HTML：

<a class="btn btn-default" role="button">
   <i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
   <i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>

Answer 1

anchor代码与button的间隔正确，因为它们是inline-block - 不确定a和button之间没有间距你到了那边。

尝试float，然后如果您愿意，可以删除它们之间的space，并在需要时设置所需的保证金。

默认情况下，它们必须正确对齐并间隔开 - 请参见下面的代码段：

a.btn, button.btn {
  margin: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<body>
<a class="btn btn-default" role="button">
   <i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
   <i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>
  </body>

看看当我们浮动时会发生什么：

a.btn, button.btn {
  margin: 0;
  float: left;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<body>
<a class="btn btn-default" role="button">
   <i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
   <i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>
  </body>

Bootstrap锚元素和按钮之间没有空格

1 个答案: