Проблемы с выравниванием столбцов с помощью Bootstrap 4
В данный момент я изучаю веб-дизайн и создаю макет веб-сайта, я новичок в bootstrap, css и html и не уверен, где я ошибаюсь, я начинаю рвать на себе волосы, так как работал над этим все утро и ничего не получается, поэтому я надеюсь, что вы, ребята, можете мне помочь. Я пытался выровнять текстовую часть моего div справа от видео. Мне удалось переместить его вправо, но не рядом с ним, поэтому все это находится внутри фонового контейнера. Мне кажется, что это может быть проблема со столбцами, поскольку столбцы видео растягиваются прямо поперек, и мне интересно, не мешают ли они последнему двигаться вверх. Я надеюсь это имеет смысл.
Я пробовал разные параметры отображения и плавания, а также разделение и смешивание строк, но, похоже, не выигрываю.
Код HTML и CSS ниже:
<!--CONTAINER MAIN ABOUT INFO-->
<div class = "page-header">
<h2>About Us</h2>
</div>
<div class = "container container-about">
<!--VIDEOS-->
<div class = "row videos">
<div class = "col-md-4 vid1">
<div class = "embed-responsive embed-responsive-16by9">
<iframe class = "embed-responsive-item" width = "560" height = "315" src = "https://www.youtube.com/embed/afRUIVxTGls" allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class = "col-md-4 vid2">
<div class = "embed-responsive embed-responsive-16by9">
<iframe class = "embed-responsive-item" width = "560" height = "315" src = "https://www.youtube.com/embed/NNgRnJIjXM4" allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class = "col-md-8 about">
<p><strong>lorem epson etc</p>
</div>
</div>
</div>
<!--END OF MAIN ABOUT INFO-->
CSS
.videos {
display: inline;
}
.about {
float: right;
}
Ответы 1
система сетки Bootstrap основан на сетке из 12 столбцов. Если вы хотите, чтобы содержимое располагалось рядом в одной строке, классы столбцов должны в сумме составлять число, равное (или меньше) 12. Прямо сейчас в этой строке у вас есть 4, 4 и 8. — что в сумме дает 16:
<div class = "container">
<div class = "row">
<div class = "col-md-4"></div>
<div class = "col-md-4"></div>
<div class = "col-md-8"></div>
</div>
</div>
Если вы собираетесь использовать макет, в котором первые два столбца занимают четверть строки, а второй — половину, используйте вместо этого 3 + 3 + 6 = 12:
<div class = "container">
<div class = "row">
<div class = "col-md-3"></div>
<div class = "col-md-3"></div>
<div class = "col-md-6"></div>
</div>
</div>
(Кроме того, не забудьте закрыть этот тег <strong>.)
Заметано! Я читал это как 4, 8, потому что 2 4 должны были быть в одном столбце, поэтому я подумал, что это все еще будет работать. Спасибо! Попробую ваш вариант :)
О нет, это не сработало, теперь выглядит примерно так же, но с большим зазором между текстом и видео, текст по-прежнему сидит справа внизу и не поднимается вверх.
@DakotaNZ Вам нужно будет удалить любой пользовательский CSS, который вы добавили, чтобы попытаться исправить ситуацию для начала. Кроме того, если вещи идут в одном столбце, они должны быть в одном и том же col-mid- div, а не в двух рядом друг с другом.
Ах отлично спасибо! Да, я добавил дисплей: раньше, чтобы заставить его работать, но теперь он, похоже, мешает.
Bootsrap основан на сетке из 12 столбцов. Вы превышаете ограничения этого макета, поэтому он не будет отображаться правильно. Вам нужно будет уменьшить общую сумму использования столбцов до 12 для вашего div, чтобы он работал по назначению. последний div 'col-md-8' занимает 2/3 пространства, уменьшите его до 'col-md-4', как остальные, и он будет работать.