Блог

Главная - Вопросы по программированию - Горизонтальное центрирование двух разделов в строке с помощью Bootstrap

Горизонтальное центрирование двух разделов в строке с помощью Bootstrap

#jquery #html #css #twitter-bootstrap #twitter-bootstrap-3

#jquery ( jquery ) #HTML #css #twitter-bootstrap #twitter-bootstrap-3

Вопрос:

У меня есть div, который действует как оболочка содержимого, которую я центрировал. Внутри него содержатся два раздела, которые я хочу разместить рядом, но в центре экрана. Я могу сделать это, установив оба значения col-md-6 , чтобы придать симметричный вид, но я хочу, чтобы они были шириной всего 4 столбца.

Между двумя разделами также есть разрыв, который я хотел бы уменьшить. Кто-нибудь может помочь?

 <div class="col-sm-10" style="margin: 0 auto; float: none;">

    <div class="col-md-4">
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
          </div>
          <div class="panel-body">
            Panel content
          </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
          </div>
          <div class="panel-body">
            Panel content
          </div>
        </div>
    </div>

</div>

Я пробовал обычный margin: 0 auto; и text-align: center; .

Ответ №1:

Я думаю, вам следует использовать вспомогательный класс из начальной загрузки ‘center-block’, а затем использовать ‘col-xx-offset’, чтобы пропустить столбцы сетки в начале внутренних разделов.

 <div class="col-sm-10 center-block">

<div class="col-md-offset-2 col-md-4">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
      </div>
      <div class="panel-body">
        Panel content
      </div>
    </div>
</div>

<div class="col-md-4">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
      </div>
      <div class="panel-body">
        Panel content
      </div>
    </div>
</div>

Ответ №2:

для центрирования столбцов: используйте col-md-offset-2

чтобы уменьшить пространство: создайте класс заполнения и переопределите заполнение boostrap по умолчанию

 .pad-left-5{
    padding-left: 5px;
}
.pad-right-5{
    padding-right: 5px;
}

Скрипка: http://jsfiddle.net/dh3sQ /

Метки: