Bootstrap 3 выравнивание по центру блоки?

Question

[setevoi11]

Как выровнять блоки по центру для разрешения col-sm col-xs ?

сейчас выровнены .block1 по левому краю .block2 по центру .block3 по правому краю

<div class="container">
       <div class="row padded">
          <div class="col-lg-2 col-md-3 col-sm-12 col-xs-12">
            <div class="block1">лого</div>
          </div>
          <div class="col-lg-8 col-md-6 col-sm-12 col-xs-12">
            <div class="block2">поиск</div>
          </div>
          <div class="col-lg-2 col-md-3 col-sm-12 col-xs-12">
            <div class="block3">корзина</div>
          </div>                    
    </div>

Answer 1

[Дмитрий Евграфович]

Блоки или содержимое блоков? есть класс .text-center для содержимого. По блокам вам ответ дали

Comments

[setevoi11]

даже если содержимое, выравнивание по центру нужно только для 2х разрешений

[Дмитрий Евграфович]

setevoi11: тогда вам надо свой класс написать для разных разрешений с применением media - выравнивания для различных разрешений, насколько я помню, нет в готовых.

[Дмитрий Евграфович]

тут собачку парсер тостера зажевал

[setevoi11]

Спасибо. думаю через media единственное решение правильное решение

Answer 2

[setevoi11]

пока так получилось
может есть еще другие варианты ?

@media screen and (max-width: 768px) {
  .col-center-xs {
    text-align: center!important;
  }
}

Answer 3

[lynnikvadim]

getbootstrap.com/css/#helper-classes-center

Answer 4

[Антон]

Есть еще col-offset

Почитайте официальную документацию.

getbootstrap.com/css/#grid-offsetting

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Comments

[setevoi11]

Это отступ, как я выровняю по центру контент?

[Антон]

setevoi11: align

или класс text-center

или: getbootstrap.com/css/#helper-classes-center

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

[Антон]

setevoi11: все что связано с bootstrap есть в документации, иначе как его изучать? Но, мне кажется, вам нужно то, что зависит не от bootstrap, а является обычным html/css решением.

Answer 5

[HellishGuardian]

Просто добавь блоку display: inline-block + float: none. У меня сработало.