【问题标题】:col-md-2 last column is not on the same linecol-md-2 最后一列不在同一行
【发布时间】:2016-04-05 05:48:00
【问题描述】:

我在一行上放置了 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 字形图标与另一个不在同一条线上,但略有下降。

我怎样才能让它与其他人处于同一水平?

【问题讨论】:

    标签: html css twitter-bootstrap twitter-bootstrap-3 grid-layout


    【解决方案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>
    

    【讨论】:

    • 非常感谢!!我有多愚蠢,我应该知道的。
    猜你喜欢
    • 2014-08-12
    • 1970-01-01
    • 2014-05-15
    • 2016-10-21
    • 1970-01-01
    • 1970-01-01
    • 2018-12-01
    • 2016-04-25
    • 2018-01-24
    相关资源
    最近更新 更多