Как мы можем центрировать значки FA в сетке Boostrap? - PullRequest
Новая
       41

Как мы можем центрировать значки FA в сетке Boostrap?

0 голосов
/ 12 мая 2019

Я использую систему сетки 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>

Ответы [ 2 ]

1 голос
/ 12 мая 2019

Вы должны поместить свои внутренние столбцы (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>

Колы не ведут себя должным образомвнутри других столбцов всегда лучше использовать формат Row-> col-> row-> col.

1 голос
/ 12 мая 2019

Попробуйте добавить класс fa-fw. Он устанавливает ширину значков на одинаковую фиксированную ширину. Вы можете прочитать больше в документах https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

...