Bootstrap等高列[重复]
Posted
技术标签:
【中文标题】Bootstrap等高列[重复]【英文标题】：Bootstrap equal height column [duplicate] 【发布时间】：2016-04-05 20:24:35 【问题描述】：考虑下面的代码：
<div class="row">
<div class="col-xs-3"><div id="sidebar">sidebar</div></div>
<div class="col-xs-3">content content content content content content content content content content content content content content content</div>
</div>
我希望侧边栏始终具有右栏的高度。
演示：http://www.bootply.com/FT3DVckZgp
【问题讨论】：
【参考方案1】：将 id 赋予第二个右边的 col 并在页面加载时使用 jquery as
$("#sidebar").css("height", $("#IdOfRightDiv").height());
【讨论】：
【参考方案2】：使用表格法。它适用于所有浏览器。将display: table 给父母，将display: table-cell 给孩子。
.row
display: table;
[class*="col-"]
float: none;
display: table-cell;
vertical-align: top;
这里是fiddle
另一种很酷的方法是借助边距。
.row
overflow: hidden;
[class*="col-"]
margin-bottom: -99999px;
padding-bottom: 99999px;
这里是fiddle
【讨论】：
【参考方案3】：你可以使用 Display:table 属性来获得你想要的输出
Have Tweeted Your Code
查看以上链接
<div class="row" style="display:table">
<div id="sidebar" class="col-xs-3" style="display:table-cell;float:none"><div>sidebar</div></div>
<div class="col-xs-3" style="display:table-cell;float:none">content content content content content content content content content content content content content content content</div>
</div>
【讨论】：
【参考方案4】：您可以使用以下代码通过提供显示布局为table、table-cell来定义相同高度的列。
定义这些 CSS 类
.container-sm-height
display: table;
padding-left:0px;
padding-right:0px;
.row-sm-height
display: table;
table-layout: fixed;
height: 100%;
.col-sm-height
display: table-cell;
float: none;
height: 100%;
对于小型设备，请使用此媒体查询
@media (min-width: 480px)
.row-xs-height
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
.col-xs-height
display: table-cell;
float: none;
height: 100%;
现在将这些类应用到您的 html 结构中，如下所示
<body>
<div class="row container-fluid row-sm-height">
<row class="col-sm-3 col-sm-height" id="sidebar">
<!--your code-->
</row>
<row class="col-sm-9 col-sm-height">
<!--Your code-->
</row>
</div>
</body>
【讨论】：
【参考方案5】：HTML
<div class="row">
<div class="col-xs-3 euqlHeight"><div id="sidebar">sidebar</div></div>
<div class="col-xs-3 euqlHeight">content content content content content content content content content content content content content content content</div>
</div>
JS
var maxHeight = 0;
$(document).ready(function()
$(".euqlHeight").each(function()
if ($(this).height() > maxHeight)
maxHeight = $(this).height();
);
$(".euqlHeight").height(maxHeight);
);
$(window).resize(function()
maxHeight = 0;
$(".euqlHeight").removeAttr("style");
$(".euqlHeight").each(function()
if ($(this).height() > maxHeight)
maxHeight = $(this).height();
);
$(".euqlHeight").height(maxHeight);
);
【讨论】：
以上是关于Bootstrap等高列[重复]的主要内容，如果未能解决你的问题，请参考以下文章
使用 Bootstrap 4.4、Wordpress 和 Bootstrap Shortcodes Ultimate 插件的 Flexbox 列等高