使用React和Bootstrap5修復了左側邊欄

我有一個使用RedWowoodJS框架的React應用程序。我想要一個頁眉，頁腳和一個固定的左邊欄，我的內容在右邊。類似于:https://www.codeply.com/p/w5ZxAjmjpo，但有一個頁腳和反應。

為了給我的應用程序添加引導程序，我運行了yarn add bootstrap，我的包里有這個。

"dependencies": {
    "bootstrap": "^5.3.0"
  }

問題是，當我試圖將側邊欄添加到我的應用程序中時，它不像上面的codeply示例那樣工作。以下是我的代碼:

import { Link, routes } from '@redwoodjs/router'
import React from 'react';
import BlogLayoutHeader from './BlogLayoutHeader';
import BlogLayoutFooter from './BlogLayoutFooter';

const BlogLayout = ({ children }) => {

  return (
    <>
      {/* <-- Début Header --> */}
      <BlogLayoutHeader />
      {/* <-- Fin Header --> */}

      { /* <-- Début Menu Vertical --> */}
        <div className="container-fluid pb-3 flex-grow-1 d-flex flex-column flex-sm-row overflow-auto">
            <div className="row flex-grow-sm-1 flex-grow-0">
                <aside className="col-sm-3 flex-grow-sm-1 flex-shrink-1 flex-grow-0 sticky-top pb-sm-0 pb-3">
                    <div className="bg-light border rounded-3 p-1 h-100 sticky-top">
                        <ul className="nav nav-pills flex-sm-column flex-row mb-auto justify-content-between text-truncate">
                            <li className="nav-item">
                                <Link to={routes.home()} className="nav-link px-2 text-truncate">
                                    <i className="bi bi-house fs-5"></i>
                                    <span className="d-none d-sm-inline">Home</span>
                                </Link>
                            </li>
                            <li>
                                <Link to={routes.home()} className="nav-link px-2 text-truncate">
                                    <i className="bi bi-speedometer fs-5"></i>
                                    <span className="d-none d-sm-inline">Dashboard</span>
                                </Link>
                            </li>
                            <li>
                                <Link to={routes.home()} className="nav-link px-2 text-truncate"><i className="bi bi-card-text fs-5"></i>
                                    <span className="d-none d-sm-inline">Orders</span> </Link>
                            </li>
                            <li>
                                <Link to={routes.home()} className="nav-link px-2 text-truncate"><i className="bi bi-bricks fs-5"></i>
                                    <span className="d-none d-sm-inline">Products</span> </Link>
                            </li>
                            <li>
                                <Link to={routes.home()} className="nav-link px-2 text-truncate"><i className="bi bi-people fs-5"></i>
                                    <span className="d-none d-sm-inline">Customers</span> </Link>
                            </li>
                        </ul>
                    </div>
                </aside>
                <main className="col overflow-auto h-100">
                    <div className="bg-light border rounded-3 p-3">
                    { /* <-- Début Body --> */}
                        {children}
                        {children}
                        {children}
                    { /* <-- Fin Body --> */}
                    </div>
                </main>
            </div>
        </div>
      { /* <-- Fin Menu Vertical --> */}

      {/* <-- Début Footer --> */}
      <BlogLayoutFooter />
      {/* <-- Fin Footer --> */}
    </>
  )
}

export default BlogLayout

這是我的css文件:

@import 'bootstrap/dist/css/bootstrap.min.css';

.container [class*='col'] {
  background-color: #efefef;
  background-clip: content-box;
}

.nav-item {
  background-color: #eeeeff;
  background-clip: content-box;
}

.container-fluid .row [class*='col'] {
  background-color: transparent; /* Remove background color from the main content area */
}

.footer {
  background-clip: inherit;
  background-color: #eeeeff;
  border-radius: 0%;
}

* {
  border-radius: 5px;
}

body.thumb {
  transform: scale(0.4);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

main {
  min-height: 80vh;
}

這是它在我屏幕上的樣子: my screen