去掉x轴滚动条，在bootstrap5格

Question

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

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

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

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

问题 x 轴滚动条出现（示例代码下方），这是不需要的，需要修复此问题...

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

 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 since the markup has several problems. Bootstrap 5 beta has the same ...

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

去掉x轴滚动条，在bootstrap5格

Remove x-axis scrollbar, In bootstrap 5 grid

css

layout

bootstrap-5

bootstrap-grid