col-md-2 最后一列不在同一行

Question

我在一行中放置了 6 个字形图标，并希望将它们变成链接（最终会变成模态）。

这是我在将它们变成链接之前将它们放在线上的代码：

   <div class="row">
   <div class="col-md-2"><i class="fa fa-windows fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><i class="fa fa-linux fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><i class="fa fa-apple fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><i class="fa fa-android fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><i class="fa fa-bluetooth fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><i class="fa fa-wifi fa-3x" class="center-block"></i></div>
</div>

效果很好。

然后我开始把它们做成链接（还没完成）：

    <div class="row">
   <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-windows fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-linux fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-apple fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-android fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-bluetooth fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-wifi fa-3x" class="center-block"></i></div>
</div>

突然间最后一个WiFi字形和另一个不在同一条线上，而是略微下降了。

如何让它与其他人处于同一水平？

Answer 1

您可以在关闭 a 标签时做到这一点。

    <div class="row">
   <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-windows fa-3x" class="center-block"></i></a></div>
   <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-linux fa-3x" class="center-block"></i></a></div>
   <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-apple fa-3x" class="center-block"></i></a></div>
   <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-android fa-3x" class="center-block"></i></a></div>
   <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-bluetooth fa-3x" class="center-block"></i></a></div>
     <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-wifi fa-3x" class="center-block"></i></a></div>
</div>

col-md-2 最后一列不在同一行

col-md-2 last column is not on the same line

html

css

grid-layout

twitter-bootstrap

twitter-bootstrap-3