2016-12-02 1 views
1

enter image description here У меня есть 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> 
+0

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

+0

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

+0

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

ответ

2

Использование 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> 

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

+0

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

+0

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

+0

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

0
<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

+0

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

+0

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

0

общее количество перевалы составляет 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> 
Смежные вопросы