Question

我正在使用 Bootstrap 4 制作一个应用程序。这个应用程序有一个导航栏和一个位于导航栏下方的容器。这是应用程序的布局：

<body>
    <div id="root">
        <div>
            <nav id="navbar" class="navbar navbar-expand navbar-dark bg-dark">
                <div id="logo" title="App"/>
                <button aria-controls="navbar-nav" type="button" aria-label="Toggle navigation" class="navbar-toggler collapsed">
                    <span class="navbar-toggler-icon"/>
                </button>
                <div class="navbar-collapse collapse" id="navbar-nav" style="--logoHeight:68px;">
                    <div class="mr-auto navbar-nav">
                        <a href="/home" class="nav-link">Menu</a>       
                    </div>
                </div>
            </nav>
            <div class="mt-2 container-fluid">
                <div>
                    <div class="d-flex align-items-center vh-100">
                        <div class="container" id="theContainerToCenterVertically">                         
                        </div>
                    </div>
                    <span/>
                </div>
            </div>
        </body>

我想垂直居中 theContainerToCenterVertically div。当前代码执行此操作，但即使内容适合一页，也会出现滚动条。如果内容适合一页，如何在不显示滚动条的情况下将该 div 垂直居中？

Answer 1

您可以使用 Bootstrap 的溢出隐藏类来隐藏任何超出页面高度且没有任何滚动条的内容。并且您可以使用 flex 让您的内容 div 填充可用空间（然后使用 h-100 使子元素填充该空间。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid px-0 d-flex flex-column vh-100">
    <nav id="navbar" class="navbar navbar-expand navbar-dark bg-dark">
        <div id="logo" title="App" />
        <button aria-controls="navbar-nav" type="button" aria-label="Toggle navigation" class="navbar-toggler collapsed">
            <span class="navbar-toggler-icon" />
        </button>
        <div class="navbar-collapse collapse" id="navbar-nav" style="--logoHeight:68px;">
            <div class="mr-auto navbar-nav">
                <a href="/home" class="nav-link">Menu</a>
            </div>
        </div>
    </nav>
    <div class="container-fluid mt-2 flex-grow-1 overflow-hidden">
        <div class="row h-100">
            <div class="col-4 h-100 d-flex flex-column justify-content-center">
                <p>
                    This column&rsquo;s content is vertically centered and is hidden if it exceeds the column height.
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, eum? Officia, tenetur iste nemo soluta esse nesciunt nostrum quod ut ab rem eaque, facere magnam possimus quia error, praesentium veniam? Quis, iste? Repellat magni eveniet quos minima dignissimos deserunt cupiditate a animi! Repudiandae nobis sequi quas libero aliquam officia dolor, vero quod obcaecati recusandae ut deleniti consequuntur explicabo exercitationem fugiat quidem. Odit iusto voluptatem possimus dicta recusandae soluta odio, natus nobis, earum eos rerum ratione atque temporibus tenetur numquam reiciendis non. Odit adipisci, numquam fuga facere nesciunt aperiam consectetur expedita autem iure incidunt eligendi placeat necessitatibus animi blanditiis aspernatur nostrum.
                </p>                    
            </div>
            <div class="col-8">
                <p>This column content is not centered</p>
            </div>
        </div>
    </div>
</div>

作为示例，我在内容区域中使用了两列。如果您只需要一列，您可以使用单个 col 或 col-12。

如何在不出现滚动条的情况下垂直居中导航栏下方的容器？

1 个答案: