我在一行中放置了 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 字形与另一个不完全在同一条线上,而是略微下降了。
我怎样才能让它与其他人处于同一水平?
最佳答案
您可以在结束 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>
关于html - col-md-2 最后一列不在同一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36413305/