Столбец начальной загрузки с автоматическим растягиванием, если соседний div пуст
Инструменты:
У меня есть следующие инструменты: Bootstrap, .less
Вопрос:
Есть ли способ автоматически растянуть столбец, если в соседнем столбце ничего нет. Вот HTML, который мне интересно:
<section class = "document-viewer fadeIn">
<div class = "tb-container">
<div class = "row">
<div class = "col-md-9">
stuff in here
</div>
<div class = "col-md-3">
<div class = "something">
sometimes stuff in here, but not always
</div>
<div class = "something">
sometimes stuff in here, but not always
</div>
<div class = "something">
sometimes stuff in here, but not always
</div>
</div>
</div>
</div>
</section>
Что я хочу:
(см. пунктирную зеленую линию)
бутстрап версии 3
Пока присутствует .col-md-3, он будет зарезервировать это пространство, независимо от того, есть ли в нем контент или нет. Что вам нужно сделать, так это удалить этот столбец, когда он не использовался, и изменить .col-md-9 на .col (для Bootstrap 4) или .col-xs-12 (для 3.x)
Какая версия Bootstrap
Ответы 2
Вы можете использовать класс автоматического столбца:
<div class = "col-md-auto">Content</div><div class = "col col-lg-3"></div>
Пожалуйста, дайте мне знать, почему мое предложение неверно, если вы решите проголосовать против.
Вы можете добавить класс / идентификатор .column или .column1 .columnN со стилем:
.column {
min-height: 500px;
background: gray;
border: 3px solid black;
}
Отрегулируйте высоту, как хотите, и добавьте этот класс в свой HTML.
OP, кажется, хочет растянуть крайние левые столбцы ширина, чтобы расширить все пространство контейнера, когда col-md-3 пуст. Как значение min-height относится к ширине объекта?
Возможно, вы захотите указать версию Bootstrap, между v3 и v4 произошли значительные изменения в сеточной системе.