Как получить содержимое div в середине с помощью бутстрапа

У меня есть 3 divs подряд, мне нужно, чтобы три divs были выровнены по центру.Как получить содержимое div в середине с помощью бутстрапа

<div class="row"> 
    <div class="center"> 
    <div class="col-sm-4" id="ph-container"></div> 
    <div class="col-sm-4" id="do-container"></div> 
    <div class="col-sm-4" id="water-temperature-container"></div> 
    </div> 
</div>

источник

2016-12-02 Swapna

Используйте 'text-center' вместо' center'. –

Непонятно, что вы спрашиваете, если вы хотите, чтобы содержимое ваших трех разделов было выровнено по центру, тогда ответ, предоставленный Правееном, будет работать. Однако, если вы хотите, чтобы три div были сложены друг на друга, но сосредоточены на странице, вам нужно удалить класс 'col-sm-4', так как это применит float. – Lee

Хорошо, код, который вы используете, будет равномерно распределять все три div на странице, так как это делают классы Bootstrap. То, что я думаю, вам следует сделать, это использовать мой ответ ... – Lee

Использование text-center вместо center.

<div class="row"> 
    <div class="text-center"> 
    <div class="col-sm-4 col-sm-offset-1" id="ph-container"></div> 
    <div class="col-sm-4" id="do-container"></div> 
    <div class="col-sm-4" id="water-temperature-container"></div> 
    </div> 
</div>

Добавление смещения поможет вам сделать вид лучше.

источник

2016-12-02 11:22:50

im не получает div в центре – Swapna

Что именно вы ожидаете? Можете ли вы показать изображение? –

@Swapna Похоже, вам нужно показать полный код, чтобы он работал. –

<div class="row"> 
    <div class="col-sm-offset-1 col-sm-3" id="ph-container"></div> 
    <div class="col-sm-3" id="do-container"></div> 
    <div class="col-sm-3" id="water-temperature-container"></div> 
</div>

Это делает три деления немного уже и толкает их слева, заставляя их появляться в центре страницы.

Помните, что, разделив divs, ваши графики могут выглядеть неправильно, поэтому вам нужно исправить свой стиль, чтобы адаптироваться к новым размерам div.

Это может помочь вам на самом деле: Bootstrap 3 1.5 column offset

источник

2016-12-02 11:32:48 Lee

его рабочий, но размер так сильно уменьшился ... – Swapna

Вы можете изменить классы на 'col-sm-3', но вы не сможете их сдвинуть на 1,5 позиции сетки ... Попробуйте изменить смещение на' col -sm-offset-1' или 'col-sm-offset-2' и посмотреть, что выглядит лучше всего. Вы всегда можете переопределить стиль в своем собственном CSS. – Lee

общее количество перевалы составляет 12, если вы используете 12 COLS (4 + 4 + 4 = 12) будет не в центре CoSe они Виль принять все с родительского блока. Таким образом, вы должны использовать меньшее количество столбцов

<div class="row"> 
    <div class="col-sm-pull-1 col-sm-3" id="ph-container"></div> 
    <div class="col-sm-3" id="do-container"></div> 
    <div class="col-sm-3" id="water-temperature-container"></div> 
</div>

источник

2016-12-02 11:33:40 NiceDOCton

Как получить содержимое div в середине с помощью бутстрапа

ответ

Смежные вопросы