Question

我正在使用Bootstrap网格系统在一个小网格中显示一些FA图标。我一直在尝试使它们在水平方向上均匀对齐而无济于事，这是它们当前的样子：

FA Icon Centering Issue

请在下面查看我的代码：

<div class="col-sm col-md-4 text-center">
    <span class="info-box-text"><input type="text" class="form-control" placeholder="Name this icon..." style="text-align: center;"/></span>
    <div class="col-sm col-md-12 block-center" style="margin-top: 10px;">
        <div class="col-sm-3"><i class="fa fa-info"></i></div>
        <div class="col-sm-3"><i class="fa fa-crosshairs"></i></div>
        <div class="col-sm-3"><i class="fa fa-question"></i></div>
        <div class="col-sm-3"><i class="fa fa-flag-o"></i></div>
    </div>
    <div class="col-sm col-md-12">
        <div class="col-sm-3"><i class="fa fa-lock"></i></div>
        <div class="col-sm-3"><i class="fa fa-tachometer"></i></div>
        <div class="col-sm-3"><i class="fa fa-power-off"></i></div>
        <div class="col-sm-3"><i class="fa fa-play"></i></div>
    </div>
    <div class="col-sm col-md-12">
        <div class="col-sm-3"><i class="fa fa-tint"></i></div>
        <div class="col-sm-3"><i class="fa fa-ban"></i></div>
        <div class="col-sm-3"><i class="fa fa-cogs"></i></div>
        <div class="col-sm-3"><i class="fa fa-bolt"></i></div>
    </div>
    <div class="col-sm col-md-12">
        <div class="col-sm-3"><i class="fa fa-heart-o"></i></div>
        <div class="col-sm-3"><i class="fa fa-stethoscope"></i></div>
        <div class="col-sm-3"><i class="fa fa-gear"></i></div>
        <div class="col-sm-3"><i class="fa fa-arrow-up"></i></div>
    </div>
    <div class="col-sm col-md-12">
        <div class="col-sm-3"><i class="fa fa-arrow-down"></i></div>
        <div class="col-sm-3"><i class="fa fa-pause"></i></div>
        <div class="col-sm-3"><i class="fa fa-exclamation"></i></div>
        <div class="col-sm-3"><i class="fa fa-asterisk"></i></div>
    </div>
</div>

Answer 1

尝试添加fa-fw类。它将图标的宽度设置为相同的固定宽度。您可以在文档https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

中阅读更多内容

Answer 2

您应将内部cols（col-sm-3）放在一行中，以使其正常运行。

赞：

<div class="col-sm col-md-4 text-center">
        <span class="info-box-text"><input type="text" class="form-control" placeholder="Name this icon..." style="text-align: center;"/></span>
        <div class="row" style="margin-top: 10px;">
            <div class="col-sm-3"><i class="fa fa-info"></i></div>
            <div class="col-sm-3"><i class="fa fa-crosshairs"></i></div>
            <div class="col-sm-3"><i class="fa fa-question"></i></div>
            <div class="col-sm-3"><i class="fa fa-flag-o"></i></div>
        </div>
        <div class="row">
            <div class="col-sm-3"><i class="fa fa-lock"></i></div>
            <div class="col-sm-3"><i class="fa fa-tachometer"></i></div>
            <div class="col-sm-3"><i class="fa fa-power-off"></i></div>
            <div class="col-sm-3"><i class="fa fa-play"></i></div>
        </div>
        <div class="row">
            <div class="col-sm-3"><i class="fa fa-tint"></i></div>
            <div class="col-sm-3"><i class="fa fa-ban"></i></div>
            <div class="col-sm-3"><i class="fa fa-cogs"></i></div>
            <div class="col-sm-3"><i class="fa fa-bolt"></i></div>
        </div>
        <div class="row">
            <div class="col-sm-3"><i class="fa fa-heart-o"></i></div>
            <div class="col-sm-3"><i class="fa fa-stethoscope"></i></div>
            <div class="col-sm-3"><i class="fa fa-gear"></i></div>
            <div class="col-sm-3"><i class="fa fa-arrow-up"></i></div>
        </div>
        <div class="row">
            <div class="col-sm-3"><i class="fa fa-arrow-down"></i></div>
            <div class="col-sm-3"><i class="fa fa-pause"></i></div>
            <div class="col-sm-3"><i class="fa fa-exclamation"></i></div>
            <div class="col-sm-3"><i class="fa fa-asterisk"></i></div>
        </div>
    </div>

col在其他col内无法正常运行，始终最好使用Row-> col-> row-> col格式。

我们如何将FA图标置于Boostrap网格的中心？

2 个答案: