bootstrap 4行的高度由特定的col设置-不是最高的 [英] bootstrap 4 row height set by specific col - not highest one
本文介绍了bootstrap 4行的高度由特定的col设置-不是最高的的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一排有两个列.
第一个col包含一些必须可见的内容:它将不会溢出行也不会滚动.
第二行包含一长串我要滚动浏览的列表，因此它不会溢出该行:
存在溢出问题的响应式设计:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://stackpath.bootstrapcdn.com/bttostrap/4.1.3/js/bootstrap.min.js" type="text/js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-8">
<div class="alert alert-info">
<h2>Some stuff</h2>
<hr />
<h4>Some stuff description</h4>
<p>
some example with some <code>code</code>
</p>
</div>
</div>
<div class="col-4 list">
<div class="list-group">
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
</div>
</div>
</div>
</div>
我当前正在使用的无响应设计:
我当前正在做的是手动设置高度，然后将overflow-y: scroll;设置为列表.
但是我认为它可能并没有我想要的那么响应...
.row {
height: 175px;
overflow-y: hidden;
}
.list {
height: 175px;
overflow-y: scroll;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://stackpath.bootstrapcdn.com/bttostrap/4.1.3/js/bootstrap.min.js" type="text/js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-8">
<div class="alert alert-info">
<h2>Some stuff</h2>
<hr />
<h4>Some stuff description</h4>
<p>
some example with some <code>code</code>
</p>
</div>
</div>
<div class="col-4 list">
<div class="list-group">
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
</div>
</div>
</div>
</div>
任何人都可以实现以下目的的解决方案:
- 具有相对于第一个col高度的行高，
- 具有第二个col溢出滚动条
解决方案
您需要创建列表组position:absolute，然后在列表和列表组上都设置overflow:auto ...
.list {
overflow: auto
}
.scroll {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow:auto;
}
演示: https://www.codeply.com/go/X2ydvxPU3k
另请参阅:
一个弹性项目设置了兄弟姐妹的身高限制
挠性等高列，但要注意另一个高度列
I have a row with two cols.
The first col contains some stuff that has to be visible: it shall not overflow the row nor scroll.
The second row contains a long list that I want to scroll through, so it doesn't overflow the row :
The responsive design with the overflow problem:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://stackpath.bootstrapcdn.com/bttostrap/4.1.3/js/bootstrap.min.js" type="text/js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-8">
<div class="alert alert-info">
<h2>Some stuff</h2>
<hr />
<h4>Some stuff description</h4>
<p>
some example with some <code>code</code>
</p>
</div>
</div>
<div class="col-4 list">
<div class="list-group">
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
</div>
</div>
</div>
</div>
The non-responsive design I'm currently using:
What I'm currently doing is setting the height manually, and set overflow-y: scroll; to the list.
But I think it might not be quite as responsive as I want it...
.row {
height: 175px;
overflow-y: hidden;
}
.list {
height: 175px;
overflow-y: scroll;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://stackpath.bootstrapcdn.com/bttostrap/4.1.3/js/bootstrap.min.js" type="text/js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-8">
<div class="alert alert-info">
<h2>Some stuff</h2>
<hr />
<h4>Some stuff description</h4>
<p>
some example with some <code>code</code>
</p>
</div>
</div>
<div class="col-4 list">
<div class="list-group">
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
<div class="list-group-item"><p>item</p></div>
</div>
</div>
</div>
</div>
Anyone has a solution to achieve the following :
- Have row height relative to the first col height,
- Have second col overflow scroll
解决方案
You need to make the list-group position:absolute, and then set overflow:auto on both the list and list-group...
.list {
overflow: auto
}
.scroll {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow:auto;
}
Demo: https://www.codeply.com/go/X2ydvxPU3k
Also see:
One flex item sets the height limit for siblings
Flex equal height column but respect max height of another column
这篇关于bootstrap 4行的高度由特定的col设置-不是最高的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
