Как выровнять кнопку по центру с помощью Bootstrap

Я создал плитку с помощью Bootstrap. Внутри плитки, рядом с нижней частью я хочу три кнопки (начало, середина и конец) плитки.

Я сделал кнопки начала и конца, но с помощью двух div теги pull-left и pull-right классы. Теперь я хочу поместить среднюю кнопку.

вот часть моего кода и скриншот:

enter image description here

<div class="col-lg-12">
    <div class="pull-left">
        <button class="btn btn-primary btn-sx" type="button">Confirm</button>
    </div>

    <!-- I want another button here, center to the tile-->

    <div class="pull-right">
        <button class="btn btn-primary btn-xs pull-right" type="button">Decline</button>
    </div>
</div>
8
css twitter-bootstrap twitter-bootstrap-3

4 ответов

одна из самых мощных функций Bootstrap-это вложенность row элементы. Каждый col-* контейнер может иметь другой row внутри него, который затем предоставляет еще один полный набор из 12 col помещения:

<div class="col-lg-12">
    <div class="row">
        <div class="col-xs-4">
            <button class="btn btn-primary btn-sx" type="button">Confirm</button>
        </div>
        <div class="col-xs-4">
            <button class="btn btn-primary btn-xs" type="button">Middle Button</button>
        </div>
        <div class="col-xs-4">
            <button class="btn btn-primary btn-xs" type="button">Decline</button>
        </div>
    </div>
</div>

Я не уверен, как ваш pull-* классы точно работают, но с помощью встроенной системы сетки Bootstrap вы сможете избавиться от них.

не упустите руководство Bootstrap по вложенности столбцов, поскольку он предоставляет больше информации, чем это ответ.

9

используйте эту опцию:

  <div class="text-center"><button class="btn btn-primary btn-sx" type="button">Confirm</button></div>
18

вы используете bootstrap, я полагаю, поэтому лучшим выбором и практикой было бы воспользоваться его "сеточной системой".

создайте div с классом row и разделите дочерние элементы внутри этого родительского div на содержимое, которое вы хотите.

способ работы этого деления заключается в том, что число за col-[size]- решает, сколько горизонтального пространства оно займет. В конце концов, он должен добавить до 12, поэтому в вашем случае мы хотим три части размером 4 каждый.

например : 

<div class="row">
    <div class="col-xs-4"></div>
    <div class="col-xs-4"></div>
    <div class="col-xs-4"></div>
</div>

затем просто поместите кнопки внутри col-xs-4 div, и вы готовы к работе.

1

это сработало для меня

<div class="text-center">

 <div class="text-center">
          <button type="button" class="btn btn-fb btn-outline-primary waves-effect" (click)="doFacebookLogin()" mdbWavesEffect>
            <i class="fa fa-facebook left"></i>Facebook</button>
          <button type="button" class="btn btn-tw btn-outline-info waves-effect" (click)="doTwitterLogin()" mdbWavesEffect>
            <i class="fa fa-twitter left"></i>Twitter</button>
          <button type="button" class="btn btn-gplus btn-outline-danger waves-effect" (click)="doGoogleLogin()" mdbWavesEffect>
            <i class="fa fa-google-plus left"></i>Google +</button>
        </div>
0