移除 x 轴滚动条，在 bootstrap 5 网格中

Question

我试图在引导程序 5 中制作类似于堆栈溢出的布局，我只使用引导程序网格而不使用其他实用程序类 (using saas)，

@import "../node_modules/bootstrap/scss/grid"

此布局由固定页眉、固定左侧边栏、可滚动的主要内容组成（主要内容包括帖子内容等和页脚）

注意在示例代码中我使用了几个 hepler 类，稍后我会处理它，它只是用于制作示例代码...

问题在x轴滚动条出现（下面的示例代码），这是不需要的，这个问题需要解决...

在问之前，我已经尝试了几种方法，不知何故我没有解决它，如果已经在这里回答，请删除链接，我将删除我的问题

 header{
            position:fixed;
            top:0;
            height: 50px;
            background-color: rebeccapurple;
        }
         #sticky-sidebar {
        position:fixed;
        height: calc(100vh - 50px);
        top: 50px;
        max-width: 20%;
        background-color: red;
        }
        main{
            min-height: 100vh;
        }
        footer{
            min-height: 100px;
        }
       

 
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

 <div class="container-fluid g-0">
        <div class="row">
            <header>
                <div class="col-md-12">
                    Header
                </div>
            </header>
        </div>
    </div>

        <div class="container-fluid g-0">
            
          <div class="row">
            <div class="col-xs-4">
              <div class="col-xs-12" id="sticky-sidebar">
               Menu
              </div>
            </div>
            <div class="col-xs-8 p-5" id="main">
                <main>
                   <p>
                       Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum maiores, molestiae porro numquam aperiam dignissimos iste quisquam quidem saepe voluptatibus possimus eum. Aut nihil maiores harum, voluptate dicta veniam quo, praesentium id ipsa esse eaque numquam cupiditate assumenda consectetur accusamus maxime ea reiciendis ut? Ut consectetur quis, sapiente, rem consequuntur architecto sit quasi dignissimos nisi nihil, tenetur necessitatibus. Veritatis, harum eaque. Quae odio repellendus architecto magni, excepturi reprehenderit, odit dolor, illum quis nulla porro? Pariatur, amet architecto sint illum, molestiae non optio quis facere deserunt nostrum reiciendis omnis illo velit dolores ex corporis nam natus, reprehenderit quos officia. Amet, facere!
                   </p>
                </main>
                <footer style="text-align: center;">
                   &copy; Footer 2021 
                </footer>
            </div>
          </div>
        </div>

Answer 1

你真的应该read the docs，因为标记有几个问题。 Bootstrap 5 beta 具有相同的grid rules as Bootstrap 4...

• rows are wrappers for columns。这意味着只有列应该放在行中，而列不应该直接放在其他列中。

• g-0（没有排水沟）应该在行上，而不是容器上

• 没有-xs 中缀。例如使用col-12 而不是col-xs-12

<header>
    <div class="row">
        <div class="col-12">Header </div>
    </div>
</header>
<div class="container-fluid">
    <div class="row g-0">
        <div class="col-4">
            <div class="row">
                <div class="col-12" id="sticky-sidebar"> Menu </div>
            </div>
        </div>
        <div class="col-xs-8 p-5" id="main">
            <main>
                <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum maiores, molestiae porro numquam aperiam dignissimos iste quisquam quidem saepe voluptatibus possimus eum. Aut nihil maiores harum, voluptate dicta veniam quo, praesentium id ipsa esse eaque numquam cupiditate assumenda consectetur accusamus maxime ea reiciendis ut? Ut consectetur quis, sapiente, rem consequuntur architecto sit quasi dignissimos nisi nihil, tenetur necessitatibus. Veritatis, harum eaque. Quae odio repellendus architecto magni, excepturi reprehenderit, odit dolor, illum quis nulla porro? Pariatur, amet architecto sint illum, molestiae non optio quis facere deserunt nostrum reiciendis omnis illo velit dolores ex corporis nam natus, reprehenderit quos officia. Amet, facere! </p>
            </main>
            <footer style="text-align: center;"> &copy; Footer 2021 </footer>
        </div>
    </div>
</div>

Demo