如何將我的內容放置在側邊欄旁邊？-有解無憂

我不是很精通 HTML 和 CSS。我目前正在構建一個網站，并使用 Bootstrap 將側邊欄集成到我的 Web 應用程式中，但它弄亂了我的布局，我似乎無法弄清楚如何將內容移動到側邊欄左側的塊中.

請在此鏈接 [1] 上查看圖片：https ://i.stack.imgur.com/XFaVv.png

如上圖所示，我的側邊欄位于右側，我的內容位于側邊欄的下方。下面是我的側邊欄和基本模板的代碼。

// Not bringing sidebar when active
const menu_toggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');

// When the button is clicked the sidebar will be active in the following code
menu_toggle.addEventListener('click', () => {
  menu_toggle.classList.toggle('is-active');
  sidebar.classList.toggle('is-active');
})

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


/* Sidebar Section */

.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 1 1 0;
  max-width: 300px;
  padding: 20px;
  background: linear-gradient(#ed7014, #fa5b3d);
  /* With Scrollbar */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  /* Scrollable contents if viewport is shorter than content. */
  border-right: 1px solid #eee;
}

.sidebar h3 {
  font-family: 'Bungee', cursive;
  color: #fff;
}

.sidebar .menu {
  margin: 0 -1rem;
}

.sidebar .menu .menu-item {
  display: block;
  padding: 1em;
  color: #fff;
  text-decoration: none;
  transition: 0.2s linear;
}

.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active {
  color: rgb(255, 238, 151);
  ;
  border-right: 5px solid rgb(255, 238, 151);
}


/* Content Scrollbar */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #ffa500;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #d67229;
}


/* Content Section */

.content {
  flex: 1 1 0;
  padding: 2rem;
  background: linear-gradient(#dd5713, #d67229);
}

.content img {
  width: 100%;
  max-width: 300px;
  display: block;
  margin: auto;
}

.content h1 {
  font-family: 'Bungee', cursive;
  color: #fff;
  margin-bottom: 1rem;
}

.content strong {
  font-family: 'Bungee', cursive;
  color: #fff;
}

.content p {
  text-align: justify;
  color: #fff;
}


/* Sample Code Content */

.sample-code {
  width: 65%;
  background: rgb(255, 238, 151);
  padding: 1em;
  margin-bottom: 2em;
  border-radius: 10px;
  box-shadow: 15px 15px;
}

.sample-code p {
  color: #000;
}


/* Button Sidebar section */

.menu-toggle {
  display: none;
  position: fixed;
  top: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  border-radius: 99px;
  background-color: #ed7014;
  cursor: pointer;
}

.button {
  position: relative;
  top: calc(50% - 2px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
}

.button>span,
.button>span::before,
.button>span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background-color: #fff;
  transition-duration: .25s;
}

.button>span::before {
  content: '';
  top: -8px;
}

.button>span::after {
  content: '';
  top: 8px;
}


/* Button Animation */

.menu-toggle.is-active .button>span {
  transform: rotate(45deg);
}

.menu-toggle.is-active .button>span::before {
  top: 0;
  transform: rotate(0deg);
}

.menu-toggle.menu-toggle.is-active .button>span::after {
  top: 0;
  transform: rotate(90deg);
}


/* Sidebar Footer */

.white-section {
  text-align: center;
}

.p-white-sec {
  color: #fff;
}

.container-fluid {
  padding: 7px 15px;
}

.footer-icon {
  margin: 20px 10px;
  color: #fff;
}

.footer-icon:hover {
  color: #ffa500;
  transition: 0.2s linear;
}


/* Mobile Size */

@media (max-width: 1024px) {
  /* Sidebar Section */
  .sidebar {
    max-width: 200px;
  }
  .sidebar img {
    height: 6.5rem;
    width: 10rem;
  }
}

@media (max-width: 768px) {
  /* Sidebar Section */
  .menu-toggle {
    display: block;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    height: 100vh;
    width: 100%;
    max-width: 300px;
    transition: 0.2s linear;
  }
  .sidebar.is-active {
    left: 0;
  }
  .sidebar img {
    height: 6.5rem;
    width: 10rem;
  }
  /* Content */
  .content {
    padding-top: 8rem;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Codin'up | HTML Course</title>

  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&family=Ubuntu:ital,wght@0,300;1,400;1,700&display=swap" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Bungee&family=Poppins&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Source Code Pro&display=swap" rel="stylesheet">

  <!-- Favicon -->
  <link rel="shortcut icon" href="/favicon.png">

  <!-- CSS Stylesheet -->
  <link rel="stylesheet" href="/CSS/List of Course/HTML Course.css">
</head>

<body>
  <section class="app">
    <!-- Button for Sidebar -->
    <div class="menu-toggle">
      <div class="button">
        <span></span>
      </div>
    </div>

    <!-- Sidebar Section -->
    <aside class="sidebar">
      <a href="/HTML/List of Course/HTML Course.html">
        <img src="/Logo/Codin'up Logo (1) White.png" alt="Codin'up">
      </a>
      <h3>HTML Course</h3>

      <nav class="menu">
        <a href="/HTML/Home.html" class="menu-item">Home</a>
        <a href="/HTML/Courses.html" class="menu-item">Courses</a>
      </nav>

      <hr>

      <nav class="menu">
        <a href="/HTML/List of Course/HTML Course.html" class="menu-item is-active">HTML Introduction</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
      </nav>

      <hr>

      <!-- Sidebar Footer -->
      <footer class="white-section" id="footer">
        <div class="container-fluid">
          <a href="https://twitter.com/i/flow/login"><i class="fa-brands fa-twitter footer-icon"></i></a>
          <a href="https://www.facebook.com/login.php/"><i class="fa-brands fa-facebook-f footer-icon"></i></a>
          <a href="https://www.secure.instagram.com/accounts/login/?next=/pbnddj/&source=profile_posts&hl=en-gb"><i class="fa-brands fa-instagram footer-icon"></i></a>
          <a href="https://www.google.com/gmail/about/"><i class="fa-solid fa-envelope footer-icon"></i></a>
          <p class="p-white-sec">&copy; 2022 ITMAWD21 Group 3</p>
        </div>
      </footer>
    </aside>

    <!-- Content Section -->
    <main class="content">
      <h1>Introduction To HTML</h1>
      <img src="/Logo/HTML Logo.png" alt="Codin'up Logo">

      <strong>Description</strong>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium ipsa, quod, placeat cupiditate enim hic natus maiores nobis sequi nisi odit voluptas earum quas perspiciatis qui explicabo recusandae ullam quibusdam? Lorem ipsum dolor sit amet
        consectetur, adipisicing elit. Dignissimos obcaecati exercitationem voluptatem accusamus, beatae sunt voluptatibus quam odio magnam, mollitia minima dicta distinctio, amet accusantium! Dolore debitis qui quis iusto. Lorem, ipsum dolor sit amet
        consectetur adipisicing elit. Accusantium harum corrupti nisi ratione aperiam commodi rerum. Delectus illum suscipit distinctio unde iste veritatis voluptate nulla, enim rem harum ullam rerum. Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Ut cumque totam ipsum, quia voluptate quam esse reprehenderit explicabo atque, molestiae doloribus earum repellendus architecto aperiam minima impedit dicta autem laboriosam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique,
        corrupti adipisci. Itaque sint, nemo laborum a ratione corrupti laboriosam tenetur soluta pariatur nostrum fuga, earum voluptate ducimus iure ipsum saepe? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae recusandae
        iste, molestiae modi ea numquam vero repellat. Doloremque iusto labore nobis placeat perspiciatis optio repellendus eius adipisci voluptas expedita. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor doloremque rem debitis? Sed quod
        eligendi inventore deleniti aliquid velit, magni perferendis, quaerat officiis in consequuntur tenetur ipsum animi tempore asperiores.</p>

      <!-- Sample Code Content -->
      <div class="sample-code">
        <p>&lt;html&gt;</p>
        <p><span style="padding-left: 20px;">&lt;head&gt;</span></p>
        <p><span style="padding-left: 40px;">&lt;title&gt;HTML Course&lt;/title&gt;</span></p>
        <p><span style="padding-left: 20px;">&lt;/head&gt;</span></p>
        <p><span style="padding-left: 20px;">&lt;body&gt;</span></p>
        <p><span style="padding-left: 40px;">&lt;p&gt;Hello World&lt;p&gt;</span></p>
        <p><span style="padding-left: 20px;">&lt;/body&gt;</span></p>
        <p>&lt;/html&gt;</p>
      </div>

      <strong>Code Description</strong>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui iusto, eveniet repudiandae ratione sint harum pariatur id numquam doloremque sequi eaque quo accusamus ab nihil aut alias inventore! Cumque, tempore.</p>
    </main>
  </section>

  <!-- Font Awesome -->
  <script src="https://kit.fontawesome.com/c9df5e490e.js" crossorigin="anonymous"></script>

  <!-- Bootstrap JS & External JS -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
  <script src="/JS/List of Course/HTML Course.js"></script>
</body>
</html>

有人可以幫我把內容放在我的側邊欄右側，尤其是它的布局嗎？感謝您的大力幫助！

uj5u.com熱心網友回復：

我不知道我是否理解得很好，但是。

嘗試在內容類中添加：

width:100%;
padding-left:300px; (the width of the menu)

uj5u.com熱心網友回復：

.sidebar 有一個位置；固定的。您可以將樣式應用于主要內容<main style="left: 272px;position: absolute;">。但是您還必須考慮調整側邊欄寬度的媒體查詢。例如

@media (max-width: 1024px){
  .sidebar {
     max-width: 200px;
  }
  main.content {
     left: 200px;
  }
}

和

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    height: 100vh;
    width: 100%;
    max-width: 300px;
    transition: 0.2s linear;
  }

  main.content {
     left: 0;
     height: 100%;
  }
}

我也會在最大寬度上使用寬度屬性。確保內容始終按預期對齊。

uj5u.com熱心網友回復：

我只會申請position: sticky并height: 100vh在側邊欄上：

position: sticky;
height: 100vh;

提供它height: 100vh可以確保側邊欄始終延伸到螢屏的整個高度。position: sticky以類似的方式作業，position: fixed但它不會以相同的方式影響檔案流。然后，您可以應用定位值，例如top: 0和left: 0，但這些屬性已在您的代碼段中應用。

// Not bringing sidebar when active
const menu_toggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');

// When the button is clicked the sidebar will be active in the following code
menu_toggle.addEventListener('click', () => {
  menu_toggle.classList.toggle('is-active');
  sidebar.classList.toggle('is-active');
})

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


/* Sidebar Section */

.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 1 1 0;
  max-width: 300px;
  padding: 20px;
  background: linear-gradient(#ed7014, #fa5b3d);
  /* With Scrollbar */
  /* Edit start */
  position: sticky;
  height: 100vh;
  /* Edit end */
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  /* Scrollable contents if viewport is shorter than content. */
  border-right: 1px solid #eee;
}

.sidebar h3 {
  font-family: 'Bungee', cursive;
  color: #fff;
}

.sidebar .menu {
  margin: 0 -1rem;
}

.sidebar .menu .menu-item {
  display: block;
  padding: 1em;
  color: #fff;
  text-decoration: none;
  transition: 0.2s linear;
}

.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active {
  color: rgb(255, 238, 151);
  ;
  border-right: 5px solid rgb(255, 238, 151);
}


/* Content Scrollbar */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #ffa500;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #d67229;
}


/* Content Section */

.content {
  flex: 1 1 0;
  padding: 2rem;
  background: linear-gradient(#dd5713, #d67229);
}

.content img {
  width: 100%;
  max-width: 300px;
  display: block;
  margin: auto;
}

.content h1 {
  font-family: 'Bungee', cursive;
  color: #fff;
  margin-bottom: 1rem;
}

.content strong {
  font-family: 'Bungee', cursive;
  color: #fff;
}

.content p {
  text-align: justify;
  color: #fff;
}


/* Sample Code Content */

.sample-code {
  width: 65%;
  background: rgb(255, 238, 151);
  padding: 1em;
  margin-bottom: 2em;
  border-radius: 10px;
  box-shadow: 15px 15px;
}

.sample-code p {
  color: #000;
}


/* Button Sidebar section */

.menu-toggle {
  display: none;
  position: fixed;
  top: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  border-radius: 99px;
  background-color: #ed7014;
  cursor: pointer;
}

.button {
  position: relative;
  top: calc(50% - 2px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
}

.button>span,
.button>span::before,
.button>span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background-color: #fff;
  transition-duration: .25s;
}

.button>span::before {
  content: '';
  top: -8px;
}

.button>span::after {
  content: '';
  top: 8px;
}


/* Button Animation */

.menu-toggle.is-active .button>span {
  transform: rotate(45deg);
}

.menu-toggle.is-active .button>span::before {
  top: 0;
  transform: rotate(0deg);
}

.menu-toggle.menu-toggle.is-active .button>span::after {
  top: 0;
  transform: rotate(90deg);
}


/* Sidebar Footer */

.white-section {
  text-align: center;
}

.p-white-sec {
  color: #fff;
}

.container-fluid {
  padding: 7px 15px;
}

.footer-icon {
  margin: 20px 10px;
  color: #fff;
}

.footer-icon:hover {
  color: #ffa500;
  transition: 0.2s linear;
}


/* Mobile Size */

@media (max-width: 1024px) {
  /* Sidebar Section */
  .sidebar {
    max-width: 200px;
  }
  .sidebar img {
    height: 6.5rem;
    width: 10rem;
  }
}

@media (max-width: 768px) {
  /* Sidebar Section */
  .menu-toggle {
    display: block;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    height: 100vh;
    width: 100%;
    max-width: 300px;
    transition: 0.2s linear;
  }
  .sidebar.is-active {
    left: 0;
  }
  .sidebar img {
    height: 6.5rem;
    width: 10rem;
  }
  /* Content */
  .content {
    padding-top: 8rem;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Codin'up | HTML Course</title>

  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&family=Ubuntu:ital,wght@0,300;1,400;1,700&display=swap" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Bungee&family=Poppins&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Source Code Pro&display=swap" rel="stylesheet">

  <!-- Favicon -->
  <link rel="shortcut icon" href="/favicon.png">

  <!-- CSS Stylesheet -->
  <link rel="stylesheet" href="/CSS/List of Course/HTML Course.css">
</head>

<body>
  <section class="app">
    <!-- Button for Sidebar -->
    <div class="menu-toggle">
      <div class="button">
        <span></span>
      </div>
    </div>

    <!-- Sidebar Section -->
    <aside class="sidebar">
      <a href="/HTML/List of Course/HTML Course.html">
        <img src="/Logo/Codin'up Logo (1) White.png" alt="Codin'up">
      </a>
      <h3>HTML Course</h3>

      <nav class="menu">
        <a href="/HTML/Home.html" class="menu-item">Home</a>
        <a href="/HTML/Courses.html" class="menu-item">Courses</a>
      </nav>

      <hr>

      <nav class="menu">
        <a href="/HTML/List of Course/HTML Course.html" class="menu-item is-active">HTML Introduction</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
        <a href="#" class="menu-item">HTML Course no.</a>
      </nav>

      <hr>

      <!-- Sidebar Footer -->
      <footer class="white-section" id="footer">
        <div class="container-fluid">
          <a href="https://twitter.com/i/flow/login"><i class="fa-brands fa-twitter footer-icon"></i></a>
          <a href="https://www.facebook.com/login.php/"><i class="fa-brands fa-facebook-f footer-icon"></i></a>
          <a href="https://www.secure.instagram.com/accounts/login/?next=/pbnddj/&source=profile_posts&hl=en-gb"><i class="fa-brands fa-instagram footer-icon"></i></a>
          <a href="https://www.google.com/gmail/about/"><i class="fa-solid fa-envelope footer-icon"></i></a>
          <p class="p-white-sec">&copy; 2022 ITMAWD21 Group 3</p>
        </div>
      </footer>
    </aside>

    <!-- Content Section -->
    <main class="content">
      <h1>Introduction To HTML</h1>
      <img src="/Logo/HTML Logo.png" alt="Codin'up Logo">

      <strong>Description</strong>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium ipsa, quod, placeat cupiditate enim hic natus maiores nobis sequi nisi odit voluptas earum quas perspiciatis qui explicabo recusandae ullam quibusdam? Lorem ipsum dolor sit amet
        consectetur, adipisicing elit. Dignissimos obcaecati exercitationem voluptatem accusamus, beatae sunt voluptatibus quam odio magnam, mollitia minima dicta distinctio, amet accusantium! Dolore debitis qui quis iusto. Lorem, ipsum dolor sit amet
        consectetur adipisicing elit. Accusantium harum corrupti nisi ratione aperiam commodi rerum. Delectus illum suscipit distinctio unde iste veritatis voluptate nulla, enim rem harum ullam rerum. Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Ut cumque totam ipsum, quia voluptate quam esse reprehenderit explicabo atque, molestiae doloribus earum repellendus architecto aperiam minima impedit dicta autem laboriosam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique,
        corrupti adipisci. Itaque sint, nemo laborum a ratione corrupti laboriosam tenetur soluta pariatur nostrum fuga, earum voluptate ducimus iure ipsum saepe? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae recusandae
        iste, molestiae modi ea numquam vero repellat. Doloremque iusto labore nobis placeat perspiciatis optio repellendus eius adipisci voluptas expedita. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor doloremque rem debitis? Sed quod
        eligendi inventore deleniti aliquid velit, magni perferendis, quaerat officiis in consequuntur tenetur ipsum animi tempore asperiores.</p>

      <!-- Sample Code Content -->
      <div class="sample-code">
        <p>&lt;html&gt;</p>
        <p><span style="padding-left: 20px;">&lt;head&gt;</span></p>
        <p><span style="padding-left: 40px;">&lt;title&gt;HTML Course&lt;/title&gt;</span></p>
        <p><span style="padding-left: 20px;">&lt;/head&gt;</span></p>
        <p><span style="padding-left: 20px;">&lt;body&gt;</span></p>
        <p><span style="padding-left: 40px;">&lt;p&gt;Hello World&lt;p&gt;</span></p>
        <p><span style="padding-left: 20px;">&lt;/body&gt;</span></p>
        <p>&lt;/html&gt;</p>
      </div>

      <strong>Code Description</strong>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui iusto, eveniet repudiandae ratione sint harum pariatur id numquam doloremque sequi eaque quo accusamus ab nihil aut alias inventore! Cumque, tempore.</p>
    </main>
  </section>

  <!-- Font Awesome -->
  <script src="https://kit.fontawesome.com/c9df5e490e.js" crossorigin="anonymous"></script>

  <!-- Bootstrap JS & External JS -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
  <script src="/JS/List of Course/HTML Course.js"></script>
</body>
</html>

uj5u.com熱心網友回復：

我檢查了布局也許你可以嘗試使用行和列來排序

<div class="row">
    <div class="col-lg-3 col-xs-4">
     //Sidebar code
    </div>
    <div class="col-lg-9 col-xs-8">
     //Content code
    </div>
</div>

這可能是更好的選擇，并且也會回應。

如果您不滿意或不熟悉，那么也許像其他人建議的那樣，您可以洗掉position:fixed樣式.sidebar將暫時解決此問題

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/516924.html

標籤：javascripthtmljQuerycss引导程序 5

上一篇：如何在python中使用seleniumWeb驅動程式啟動chrome，而不是作為訪客，而是作為我的chrome組態檔？

下一篇：將Mongo配置添加到活動Spark會話