2

Это казалось довольно простым, но появились загвоздки.. Нужно на главной странице сделать в 3 колонки div с категориями, я сделал это таким способом:

<div class="row">
  <div class="container">
    <div class="col-md-4">content</div>
    <div class="col-md-4">content</div>
    <div class="col-md-4">content</div>
  </div>
</div>

В большинстве все так и стало - в 3 колонки, но если в div"е контент по содержанию больше чем в след div"ах то след div"ы будут выстраиваться друг над другом вместо того чтобы переноситься на свое место.. Примерно так:введите сюда описание изображения

UPD: пример на планкр, для просмотра лучше сделать вью на полный экран Подскажите как указать что переносить не нужно?

UPD UPD: в итоге я дописал в цсс:

  @media (min-width: 992px) {
.col-md-4:nth-child(3n+1) {
  clear: left;
}
  }

насколько это будет правильно не знаю, но в решении моей проблемы это отлично помогло.

1
  • Вы вообще пытаетесь всё в 1 строку закинуть (ведь всего 1 раз класс row прописан) 10 июл 2016 в 9:06

1 ответ 1

1

.container {
  padding: 5px;
}
.col-xs-4 {
  border: 1px solid #ccc;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="container">
    <div class="col-xs-4">content</div>
    <div class="col-xs-4">content</div>
    <div class="col-xs-4">content</div>
  </div>
</div>
<div class="row">
  <div class="container">
    <div class="col-xs-4">content2<br>content<br>content<br></div>
    <div class="col-xs-4">content2</div>
    <div class="col-xs-4">content2<br>content<br>content<br><br>content<br>content<br></div>
  </div>
</div>
<div class="row">
  <div class="container">
    <div class="col-xs-4">content</div>
    <div class="col-xs-4">content</div>
    <div class="col-xs-4">content</div>
  </div>
</div>

Класс row подразумевает что всё остальное будет на новой строке. Приведите реальный код пожалуйста, тогда уже можно будет о чём-то говорить.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.