#html #css #twitter-bootstrap
#HTML #css #twitter-bootstrap
Вопрос:
Я пытаюсь заставить сетку работать для миниатюр видео. Я хочу, чтобы на рабочем столе было 4 столбца, а на планшете / мобильном устройстве — 2 столбца.
Каждый столбец содержит миниатюру и заголовок видео. Проблема в том, что некоторые заголовки видео длиннее других, из-за чего сетка становится запутанной. Я просто хочу сделать так, чтобы столбцы могли быть любой высоты, а количество столбцов в строке не изменялось из-за плавающего значения.
Я прочитал другой ответ на этом сайте, но у меня он вообще не работает.
Вот мой HTML-код:
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/gas-station-safety-19.jpg" alt="Gas station safety" class="img-responsive">
Gas station safety
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/wild-squirrels-love-sunflower-seeds-17.jpg" alt="Wild squirrels love sunflower seeds" class="img-responsive">
Wild squirrels love sunflower seeds
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/bobcats-fighting-in-tree-22.jpg" alt="Bobcats fighting in tree" class="img-responsive">
Bobcats fighting in tree
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/head-on-train-crash-20.jpg" alt="Head on train crash" class="img-responsive">
Head on train crash
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/spelling-pregnant-is-hard-2.jpg" alt="Spelling pregnant is hard" class="img-responsive">
Spelling pregnant is hard
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/kid-rolls-car-while-singing-1.jpg" alt="Kid rolls car while singing" class="img-responsive">
Kid rolls car while singing
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/usa-unemployment-map-timeline-6.jpg" alt="USA unemployment map timeline" class="img-responsive">
USA unemployment map timeline
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/guy-trolls-car-dealership-5.jpg" alt="Guy trolls car dealership" class="img-responsive">
Guy trolls car dealership
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/red-dead-redemption-2-trailer-9.jpg" alt="Red Dead Redemption 2 Trailer" class="img-responsive">
Red Dead Redemption 2 Trailer
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/nintendo-switch-preview-7.jpg" alt="Nintendo Switch preview" class="img-responsive">
Nintendo Switch preview
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/you-re-dying-12.jpg" alt="You're dying" class="img-responsive">
You're dying
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/university-goalie-signed-by-canucks-10.jpg" alt="University goalie signed by Canucks" class="img-responsive">
University goalie signed by Canucks
</a>
</div>
</div>
</div>
Вот мой CSS-код:
.index-col a {
display: block;
}
.index-col a img {
margin-bottom: 10px;
}
@media (max-width: 991px) {
.index-col:nth-child(2n) {
border: 1px solid red;
}
.index-col:nth-child(2n)::after {
content: '';
display: block;
clear: both;
}
}
@media (min-width: 992px) {
.index-col:nth-child(4n) {
border: 1px solid green;
}
.index-col:nth-child(4n)::after {
content: '';
display: block;
clear: both;
}
}
Проблема в коде ::after. Похоже, что это вообще не очищает значение float. Это не имеет никакого эффекта вообще.
Буду признателен за любую помощь.
Комментарии:
1. Вы хотите, чтобы столбцы были одинаковой высоты? Или вы хотите больше эффекта каменной кладки?
2. я не хочу, чтобы они были одинаковой высоты или имели эффект каменной кладки. я просто хочу, чтобы они были 4 столбцами на рабочем столе, 2 столбцами на мобильном устройстве, независимо от их высоты.
Ответ №1:
Попробуйте установить clear: both для первого элемента в следующей строке вместо ::after псевдоэлемента последнего элемента в строке.
.index-col a {
display: block;
}
.index-col a img {
margin-bottom: 10px;
}
.index-col:nth-child(4n 1) {
clear: both;
}
@media (max-width: 991px) {
.index-col:nth-child(2n) {
border: 1px solid red;
}
.index-col:nth-child(2n 1) {
clear: both;
}
}
@media (min-width: 992px) {
.index-col:nth-child(4n) {
border: 1px solid green;
}
.index-col:nth-child(4n 1) {
clear: both;
}
}
Здесь у вас есть рабочий пример
Комментарии:
1. Блестяще. Большое вам спасибо.