Using bootstrap, how to make two columns of the same height

clipboard.png

< div class= "row" >

<div class="col-md-2 sidebar">1</div>
<div class="col-md-10 content">2</div>

< / div >

column 1 is higher than column 2. What should I do?

use JS to force two columns to be equal, but if column 2 wants to add content, it will overflow. What to do
var sidebarHeight = $(".sidebar"). Height ();
$(".content") .height (sidebarHeight);

Mar.06,2021

ul.main-content.row > li.col-lg-2.col-md-3.col-xs-12.col-sm-3.left+li.col-lg-10.col-md-9.col-xs-12.col-sm-9.right

.main-content {

 overflow: hidden;

zoom: 1;
}

.left,
.right {

 margin-bottom: -3000px;

padding-bottom: 3000px;
}

here is a direct introduction to what I think is the best way to automatically equate the sidebar / column height. The core CSS code is as follows (the value is not fixed):
margin-bottom:-3000px; padding-bottom:3000px;
combined with the overflow:hidden attribute of the parent tag, you can achieve a high degree of automatic equality.

from Zhang Xinxu's log


refer to flex layout

Menu