bootstrap 4 行高由特定 col 设置 - 不是最高的 [英] bootstrap 4 row height set by specific col - not highest one

查看：15
本文介绍了bootstrap 4 行高由特定 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>一些东西</h2><小时/><h4>一些东西描述</h4><p>一些带有code的示例</p>

<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>

我目前使用的非响应式设计:

我目前正在做的是手动设置高度，并将 overflow-y: scroll; 设置到列表中.
但我认为它可能没有我想要的那么敏感......

.row {高度:175px；溢出-y:隐藏；}.列表 {高度:175px；溢出-y:滚动；}

<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>一些东西</h2><小时/><h4>一些东西描述</h4><p>一些带有code的示例</p>

<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>

任何人都有实现以下目标的解决方案:

  1. 具有相对于第一列高度的行高，
  2. 有第二个 col 溢出滚动

解决方案

你需要把list-group设为position:absolute，然后设置overflow:auto列表和列表组...

.list {溢出:自动}.滚动{位置:绝对；顶部:0；左:0;右:0;底部:0;溢出:自动；}

演示:https://codeply.com/go/X2ydvxPU3k

<小时>

另见:
一个 flex/grid item 设置兄弟姐妹的大小限制
Flex 等高列但尊重另一个的最大高度列

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 :

  1. Have row height relative to the first col height,
  2. 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://codeply.com/go/X2ydvxPU3k

Also see:
One flex/grid item sets the size limit for siblings
Flex equal height column but respect max height of another column

这篇关于bootstrap 4 行高由特定 col 设置 - 不是最高的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆