Центр загрузки 3 col-md-3 divs

У меня есть обертка: <div class="community-images"></div>

и внутри этой оболочки у меня есть 3 col-md-3 divs:

<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>

то, что я пытаюсь сделать, - это центрирование этих трех div внутри обертки, как бы это сделать?

Вот CSS:

.community-images {
  padding: 40px 0px 40px 0px;
}

.col-md-3 {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  min-height: 300px;
  box-shadow: 10px 10px 5px #888888;
}

Ответ 1

Обновление: это хорошее решение для обычного макета, а не для Twitter Bootstrap, поскольку оно нарушает поведение Bootstrap. Проверьте Jeben на лучший макет.

Современное решение для браузеров и подходит для вашей проблемы. Flexbox с обоснованным контентом.

@media (min-width:992px) {
  .community-images {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

Bootply

Ответ 2

Существуют классы col-md-offset. К сожалению, вам нужен класс col-md-offset-1-и-half, чтобы иметь сумму в 12 колод.

Я говорю о 1,5 + 3 + 3 + 3 + 1,5 = 12

Таким образом, вы можете написать свой собственный класс для смещения col. Smth вот так.

@media (min-width: 992px) {
    .col-md-offset-1-and-half {
        margin-left: 12.499999995%; // col-md-offset-1 has 8.33333333
        // so you multiply 8.33333333 * 1.5 = 12.499999995%
    }
}

<div class="col-md-3 col-md-offset-1-and-half"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>

Ответ 3

Центрирование плавающих элементов (например, реагирующих), таких как столбцы начальной загрузки, требует некоторой работы с полями, как предположил yuyokk.

Или вы можете развернуть элементы и использовать встроенный блок:

.community-images {
  text-align: center;
}

.col-md-3 {
  float: none;
  display: inline-block;
  text-align: left; //reset the text alignement to left
}

Работает везде, включая IE8.

Ответ 4

Для тех, кто использует Bootstrap 4, эта функция была добавлена: http://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Ответ 5

Код:

<div class="community-images">
<div class="col-md-3 community-margin"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>

css:

@media (min-width: 768px) {
.community-margin{
    margin-left: 12.5%;
}
}

.community-images {
  padding: 40px 0px 40px 0px;
}

.col-md-3 {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  min-height: 300px;
  box-shadow: 10px 10px 5px #888888;
}

Попробуйте код выше. Вы определенно получите решение. Вы также можете ссылаться на ссылку ниже: https://wordpress.com/post/wpkuldip.wordpress.com/61