twitter-bootstrap - 如何使用 Bootstrap 4 创建可独立滚动的列？

问题描述

我试图在顶部获得一些固定高度的内容，下面有 2 列可单独滚动。我希望他们占用任何可用的屏幕高度，所以我不能使用 fixedheight或max-height.

我正在使用 Bootstrap 4.5，所以我的标记看起来像：

<body>

    <div class="container">

        <div class="row">
            <div class="col-12">
                <h1>h1</h1>
                ...main nav...
            </div>
        </div>

        <div class="row">
            <div class="col-7">
                ...crumbtrail...
            </div>
        </div>

        <div class="row">
            <div id="col-left" class="col-7">
                ...left-content...
            </div>

            <div id="col-right" class="col-5">
                ...right-content...
            </div>
        </div>

    </div>

</body>

正是这些列col-left，col-right我想独立滚动。我已经尝试了两种使用 flexbox 的方法，在这两种情况下......什么都没有。没有滚动条。完全没有明显的区别。

显然，我在这里缺少一些基本的理解。

我没有挂断 flexbox 解决方案。其他一些 CSS 解决方案也可以，必要时甚至可以使用 JS。

方式一：顶层容器上的flexbox

这个想法是使所有内容都灵活，但防止两个标题行缩小。我将使用 Bootstrap 4 类来完成这一切，所以不flex-basis。但这automatic是我想要的默认设置。我认为。

这是我的想法：

flex-grow-0到处都是，因为我不想让任何东西长出来填满空间
flex-shrink-0在前两行
flex-shrink-1在包含我的 2 列的行上，以及列本身
实际上列内的任何东西都没有flex css或类

正如我上面所说，没有任何反应。

<body>

    <div class="container d-flex flex-column">

        <div class="row flex-grow-0 flex-shrink-0">
            <div class="col-12">
                <h1>h1</h1>
                ...main nav...
            </div>
        </div>

        <div class="row flex-grow-0 flex-shrink-0">
            <div class="col-7">
                ...crumbtrail...
            </div>
        </div>

        <div id="col-left" class="row flex-grow-0 flex-shrink-1">
            <div id="col-left" class="col-7 flex-grow-0 flex-shrink-1">
                ...left-content...
            </div>

            <div id="col-right" class="col-5 flex-grow-0 flex-shrink-1">
                ...right-content...
            </div>
        </div>

    </div>

</body>

方式2：flexbox仅在包含两列的行上

也许所有东西上的 flexbox 都是矫枉过正的，这把事情搞砸了？让我们尝试更加专注。

d-flex在包含我的列的行上。这次是flex-row代替flex-column。
我不希望列在主轴上增长或缩小，所以他们现在flex-grow-0 flex-shrink-0

现在我想要我的滚动条在横轴上。align-stretch将在横轴上拉伸它们，但没有align-shrink？

这就是我卡住的地方。

<body>

    <div class="container">

        <div class="row">
            <div class="col-12">
                <h1>h1</h1>
                ...main nav...
            </div>
        </div>

        <div class="row">
            <div class="col-7">
                ...crumbtrail...
            </div>
        </div>

        <div class="row d-flex flex-row">
            <div id="col-left" class="col-7 flex-grow-0 flex-shrink-0">
                ...left-content...
            </div>

            <div id="col-right" class="col-5 flex-grow-0 flex-shrink-0">
                ...right-content...
            </div>
        </div>

    </div>

</body>

标签： twitter-bootstrapbootstrap-4flexboxmultiple-columns

<div class="container d-flex flex-column vh-100 mh-100 overflow-hidden"> <div class="row flex-shrink-1"> <div class="col-12"> <h1>h1</h1> ...main nav... </div> </div> <div class="row flex-shrink-1"> <div class="col-7"> ...crumbtrail... </div> </div> <div class="row flex-grow-1 overflow-hidden"> <div id="col-left" class="col-7 mh-100 overflow-auto"> ...left-content... </div> <div id="col-right" class="col-5 mh-100 overflow-auto"> ...right-content... </div> </div> </div>

twitter-bootstrap - 如何使用 Bootstrap 4 创建可独立滚动的列？

问题描述

方式一：顶层容器上的flexbox

方式2：flexbox仅在包含两列的行上

解决方案

推荐阅读