css Bootstrap：使用响应的24列行填充剩余的垂直空间

pvabu6sv 于 2023-01-18 发布在 Bootstrap

关注(0)|答案(1)|浏览(230)

这是我在这里的第一个问题，虽然我已经在这个网站上找到了几年的解决方案虽然!
我觉得这个"多排"的问题还没有解决，至少我一直没有找到答案。
我在使用Bootstrap 5.3时遇到了CSS/HTML的布局问题。我有两行需要跨越整个容器（所以几乎是整个视区）。我的第一行使用flex-grow: 1!important; min-height: 0; overflow: hidden;来增长-这在足够宽的屏幕上工作得很好。尽管在小屏幕上，我把内容拉伸到两个显示的"子行"上的24列中。然后我下面的"子行"变得太长，因为它仍然使用整行的高度来计算它的高度。
这是我的简化代码-请在全窗口中查看结果，否则它会看起来很混乱：

#root {
    height: 100vh;
    padding: .25rem;
}
.growing-row-overflow-hidden {
    flex-grow: 1!important;
    min-height: 0;
    overflow: hidden;
}
.pianoroll {
    overflow: hidden;
    display: inline-block;
}
.notYetReady {
    opacity: .5;
    pointer-events: none;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div id="root">
<div class="container-md text-center border h-100">
    <div class="App h-100 d-flex flex-column">
        <div class="row growing-row-overflow-hidden">
            <div class="col-12 col-sm-6">
                <div class="row h-100">
                    <div class="col-4 col-sm-12 flex-grow-1 list-group p-2 ">
                        <div class="list-group-item list-group-item-secondary text-uppercase">Record</div>
                        <div class="list-group-item h-100"><button
                                class="btn btn-outline-success w-100 h-100">Start</button></div>
                    </div>
                    <div class="col-4 col-sm-12 flex-grow-1 list-group p-2 notYetReady">
                        <div class="list-group-item list-group-item-secondary text-uppercase">Stop</div>
                        <div class="list-group-item h-100"><button
                                class="btn btn-outline-warning w-100 h-100">Stop</button></div>
                    </div>
                    <div class="col-4 col-sm-12 flex-grow-1 list-group p-2 ">
                        <div class="list-group-item list-group-item-secondary text-uppercase">Save</div>
                        <div class="list-group-item h-100"><button
                                class="btn btn-outline-primary w-100 h-100">Save</button></div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 list-group p-2 h-100 ">
                <div class="list-group-item list-group-item-secondary text-uppercase">Your Pitch</div>
                <div class="list-group-item h-100 overflow-auto">
                    <div class="pianoroll">
                        <div style="height: 2000px; background-color: red">A lot of content...</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col list-group list-group-horizontal p-2">
                <div class="list-group-item list-group-item-secondary text-uppercase">Sensitivity</div>
                <div class="list-group-item w-100 d-flex"><span class="flex-fill"><input type="range"
                            class="form-range liveSensitivitySlider" style="--inputRMS:0%;"></span></div>
                <div class="list-group-item"><button class="btn btn-outline-primary w-100 h-100">Settings</button></div>
            </div>
        </div>
    </div>
</div>
</div>

我愿意以不同的方式实现这种布局。我的目标是让两行占据整个屏幕--无论是在小屏幕上显示三行，还是在大屏幕上显示两行。
帮助将不胜感激!
谢谢你，
瓦勒

css

来源：https://stackoverflow.com/questions/75135883/bootstrap-fill-remaining-vertical-space-with-responsive-24-column-row

1条答案

按热度按时间

hgb9j2n61#

我自己使用了一个响应式的CSS网格来解决这个问题。如果有人有同样的问题，我建议不要使用行，因为它们似乎不适合这个任务（以填充剩余的垂直空间但不是更多，即使包含的列突破了几行并有大量内容）我不得不为没有行和列的按钮的布局添加一些类，但那只是小小的设计修正。
这是我的解决方案：

#root {
    height: 100vh;
    padding: .25rem;
}
.grid-container {
    display: grid;
    grid: auto 1fr auto / 1fr 1fr;
    width: 100%;
    height: 100%;
}
.grid-left-or-top {
    grid-area: 1 / 1 / 2 / 3;
    overflow: auto;
}
.grid-right-or-bottom {
    grid-area: 2 / 1 / 3 / 3;
    overflow: auto;
}
.grid-footer {
    grid-area: 3 / 1 / 3 / 3;
}
@media (min-width: 768px) {
    .grid-left-or-top {
        grid-area: 1 / 1 / 3 / 2;
    }
    .grid-right-or-bottom {
        grid-area: 1 / 2 / 3 / 3;
    }
    .list-group-vertical-md {
        flex-direction: column!important;
    }
    .list-group-vertical-md>.list-group-item:first-child:not(:last-child) {
        border-bottom-left-radius: 0!important;
        border-top-right-radius: var(--bs-list-group-border-radius)!important;
    }
    .list-group-vertical-md>.list-group-item+.list-group-item {
        border-top-width: 0!important;
        border-left-width: var(--bs-list-group-border-width)!important;
    }
    .list-group-vertical-md>.list-group-item:last-child:not(:first-child) {
        border-top-right-radius: 0!important;
        border-bottom-left-radius: var(--bs-list-group-border-radius)!important;
    }
}
.pianoroll {
    overflow: hidden;
    display: inline-block;
}
.notYetReady {
    opacity: .5;
    pointer-events: none;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div id="root">
    <div class="container-md text-center border h-100">
        <div class="App h-100 grid-container">
            <div class="grid-left-or-top">
                <div class="h-100 w-100">
                    <div class="h-100 w-100 list-group list-group-horizontal list-group-vertical-md p-2 ">
                        <div class="list-group-item list-group-item-secondary group-header">Record</div>
                        <div class="list-group-item flex-fill"><button
                                class="btn btn-outline-success w-100 h-100">Start</button></div>
                        <div class="list-group-item flex-fill"><button
                                class="btn btn-outline-warning w-100 h-100">Stop</button></div>
                        <div class="list-group-item flex-fill"><button
                                class="btn btn-outline-primary w-100 h-100">Save</button></div>
                    </div>
                </div>
            </div>
            <div class="grid-right-or-bottom">
                <div class="list-group p-2 h-100 w-100 ">
                    <div class="list-group-item list-group-item-secondary group-header">Your Pitch</div>
                    <div class="list-group-item h-100 overflow-auto">
                        <div class="pianoroll">
                            <div style="height: 2000px; background-color: red">A lot of content...</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid-footer">
                <div class="col list-group list-group-horizontal p-2">
                    <div class="list-group-item list-group-item-secondary group-header">Sensitivity</div>
                    <div class="list-group-item w-100 d-flex"><span class="flex-fill"><input type="range" min="-50"
                                max="0" step="1" class="form-range liveSensitivitySlider" value="-40"
                                style="--inputRMS:0%;"></span></div>
                    <div class="list-group-item"><button class="btn btn-outline-warning w-100 h-100">Settings</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

赞(0）回复(0）举报 2023-01-18

我来回答

css Bootstrap：使用响应的24列行填充剩余的垂直空间

1条答案

相关问题

热门标签

最新问答