Свертывание трехколоночного макета bootstrap
Я пытаюсь создать макет Bootstrap с тремя неравными столбцами с col-md-3, col-md-6, col-md-3. Все работает нормально, однако, когда я пытаюсь добавить поля к столбцам, они сворачиваются. Мне было интересно, как это предотвратить, я предполагаю, что это как-то связано со свойством столбца Bootstrap или шириной столбца. Я ценю любую помощь, которую я получаю, спасибо!
#mid {
background-color: #fff;
margin-top: 20px;
}
#favorite {
background-color: red;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
}
#free {
background-color: blue;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
}<div class = "container-fluid">
<div class = "row">
<div class = "col-md-3" id = "favorite">
<h2 class = "text-center">Favorite</h2>
<div class = "ins">
<h5>Blah</h5>
<div>
<img src = "" height = "40" width = "40"> Blah
</div>
<div>
<img src = "" height = "40" width = "40"> Blah
</div>
</div>
<div class = "teach">
<h5>Blah</h5>
<div>
<img src = "" height = "40" width = "40"> Blah
</div>
<div>
<img src = "" height = "40" width = "40"> Blah
</div>
</div>
</div>
<div class = "col-md-6" id = "mid">
<h1 class = "text-center">Upcoming</h1>
<div class = "lesson-info" id- "1">
<img src = "" height = "40" width = "40"> Blah Blah Blah Blah Blah Blah Blah Blah
<button type = "submit" name = "submit" class = "btn blue_button">Start</button>
<button type = "submit" name = "submit" class = "btn white_button">Cancel</button>
</div>
<div class = "col-md-3" id = "free">
<h3 class = "text-center">Get free</h3>
</div>
</div>
</div>
Ответы 2
Добавляйте отступы, а не поля. Маржа создает пространство за пределами вашего div, поэтому начальный css для вас становится беспорядочным и не будет выравниваться, как вы хотели, с вашим кодом
#favorite {
background-color: red;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
}Вы должны использовать padding вместо margins.
Bootstrap использует классы столбцов для генерации процента ширины, поэтому добавление полей к столбцам приведет к отображению более 100% ширины и нарушит ваш макет.
Возможно, вам потребуется настроить разметку, чтобы она выглядела так же, как при добавлении полей. Например, если вы хотите добавить цвет фона к столбцам, но оставить между ними пробел, вы можете добавить div-оболочку внутри столбца, применить цвет к элементу оболочки и добавить отступ к столбцу.