0

Всем привет подскажите как в boostrap 3 выровнить эти блоки по центру?

   <div class="row">
        <div class=" col-xs-2 col-md-3">
            <div class="card mb-4 box-shadow">
                <img src="#" class="img-fluid">
                <div class="card-body">
                    <p class="card-text text-center"><b>text</p>
                </div>
                <div class="text-center">
                <a class="btn btn-lg text-uppercase u-btn-green cs-font-weight-700 cs-font-size-11 cs-color-white cs-color-white--hover cs-bg-primary--hover cs-brd-none rounded-0 cs-px-20 speaker_button_container" href="#" style="margin-bottom: 5px;">подробнее</a>
                </div>
            </div>
        </div>

        <div class=" col-xs-2 col-md-3">
            <div class="card mb-4 box-shadow">
                <img src="#" class="img-fluid">
                <div class="card-body">
                    <p class="card-text text-center"><b>text</p>
                </div>
                <div class="text-center">
                <a class="btn btn-lg text-uppercase u-btn-green cs-font-weight-700 cs-font-size-11 cs-color-white cs-color-white--hover cs-bg-primary--hover cs-brd-none rounded-0 cs-px-20 speaker_button_container" href="#" style="margin-bottom: 5px;">подробнее</a>
                </div>
            </div>
        </div>

        <div class=" col-xs-2 col-md-3">
            <div class="card mb-4 box-shadow">
                <img src="#" class="img-fluid">
                <div class="card-body">
                    <p class="card-text text-center"><b>text</p>
                </div>
                <div class="text-center">
                <a class="btn btn-lg text-uppercase u-btn-green cs-font-weight-700 cs-font-size-11 cs-color-white cs-color-white--hover cs-bg-primary--hover cs-brd-none rounded-0 cs-px-20 speaker_button_container" href="#" style="margin-bottom: 5px;">подробнее</a>
                </div>
            </div>
        </div>

    </div>

Если у меня 4 блока, то все классно они выравниваются по центру, а если 3 блока то нет, как сделать стандартными средствами boostrap что бы они выравнивались всегда по центру?

1 ответ 1

0

Вот готовое решение: https://codepen.io/anon/pen/mLJVRm

.container>.row>some cols

Смысл в том что сетка бутстрапа должна состоять из 12колонок (4 * 3 = 12) И быть обрамленной в контейнер или безразмерный контейнер (.container-fluid) в котором лежит .row Если важно сохранить фиксированную ширину колонки, то меняем ширину контейнера

2
  • Спасибо, но не совсем то, дело в том что у меня по горизонтали может быть от 1 колонки до 4, и мне надо сделать так что бы если 1 колонка или 2 или 3 то они выравнивались по центру row 20 апр 2018 в 7:01
  • если колонки три то ставьте col--4 если колонки четыре то ставьте col--3 20 апр 2018 в 7:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.