Bootstrap SideBar（模板）：即使下面没有长段落，我也希望内容中的导航栏能够伸展

Question

我按照在线教程创建了一个好看的边栏：
https://bootstrapious.com/p/bootstrap-sidebar

$(document).ready(function() {
  $('#sidebarCollapse').on('click', function() {
    $('#sidebar').toggleClass('active');
    $(this).toggleClass('active');
  });
});

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
  font-family: 'Poppins', sans-serif;
  background: #fafafa;
}

p {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1em;
  font-weight: 300;
  line-height: 1.7em;
  color: #999;
}

a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}

.navbar {
  padding: 15px 10px;
  background: #fff;
  border: none;
  border-radius: 0;
  margin-bottom: 40px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
  box-shadow: none;
  outline: none !important;
  border: none;
}

.line {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #ddd;
  margin: 40px 0;
}


/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
  display: flex;
  align-items: stretch;
  perspective: 1500px;
}

#sidebar {
  min-width: 250px;
  max-width: 250px;
  background: #7386D5;
  color: #fff;
  transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
  transform-origin: bottom left;
}

#sidebar.active {
  margin-left: -250px;
  transform: rotateY(100deg);
}

#sidebar .sidebar-header {
  padding: 20px;
  background: #6d7fcc;
}

#sidebar ul.components {
  padding: 20px 0;
  border-bottom: 1px solid #47748b;
}

#sidebar ul p {
  color: #fff;
  padding: 10px;
}

#sidebar ul li a {
  padding: 10px;
  font-size: 1.1em;
  display: block;
}

#sidebar ul li a:hover {
  color: #7386D5;
  background: #fff;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
  color: #fff;
  background: #6d7fcc;
}

a[data-toggle="collapse"] {
  position: relative;
}

a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
  content: '\e259';
  display: block;
  position: absolute;
  right: 20px;
  font-family: 'Glyphicons Halflings';
  font-size: 0.6em;
}

a[aria-expanded="true"]::before {
  content: '\e260';
}

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #6d7fcc;
}

ul.CTAs {
  padding: 20px;
}

ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px;
}

a.download {
  background: #fff;
  color: #7386D5;
}

a.article,
a.article:hover {
  background: #6d7fcc !important;
  color: #fff !important;
}


/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
  padding: 20px;
  min-height: 100vh;
  transition: all 0.3s;
}

#sidebarCollapse {
  width: 40px;
  height: 40px;
  background: #f5f5f5;
}

#sidebarCollapse span {
  width: 80%;
  height: 2px;
  margin: 0 auto;
  display: block;
  background: #555;
  transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
  transition-delay: 0.2s;
}

#sidebarCollapse span:first-of-type {
  transform: rotate(45deg) translate(2px, 2px);
}

#sidebarCollapse span:nth-of-type(2) {
  opacity: 0;
}

#sidebarCollapse span:last-of-type {
  transform: rotate(-45deg) translate(1px, -1px);
}

#sidebarCollapse.active span {
  transform: none;
  opacity: 1;
  margin: 5px auto;
}


/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
  #sidebar {
    margin-left: -250px;
    transform: rotateY(90deg);
  }
  #sidebar.active {
    margin-left: 0;
    transform: none;
  }
  #sidebarCollapse span:first-of-type,
  #sidebarCollapse span:nth-of-type(2),
  #sidebarCollapse span:last-of-type {
    transform: none;
    opacity: 1;
    margin: 5px auto;
  }
  #sidebarCollapse.active span {
    margin: 0 auto;
  }
  #sidebarCollapse.active span:first-of-type {
    transform: rotate(45deg) translate(2px, 2px);
  }
  #sidebarCollapse.active span:nth-of-type(2) {
    opacity: 0;
  }
  #sidebarCollapse.active span:last-of-type {
    transform: rotate(-45deg) translate(1px, -1px);
  }
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- Import bootstrap 4 styles -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title>THE BIN | List All Bin</title>
</head>

<body>
  <div class="wrapper">
    <nav id="sidebar">
      <div class="sidebar-header">
        <h3>THE BIN</h3>
      </div>

      <ul class="list-unstyled components">
        <p>MARK</p>
        <li>
          <a href="account.php">Account</a>
        </li>
        <li class="active">
          <a href="listAllBin.php">List All Bin</a>
        </li>
        <li>
          <a href="listFullBin.php">List Full Bin</a>
        </li>
        <li>
          <a href="logout.php">Log Out</a>
        </li>
      </ul>
    </nav>

    <div id="content">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" id="sidebarCollapse" class="navbar-toggler">
                            <span></span>
                            <span></span>
                            <span></span>
                        </button>
          </div>

          <span class="navbar-text"><h4>List All Bin</h4></span>
        </div>
      </nav>

      <p class="d-none d-md-block">
        This page list all of the bin you would like to monitor. Bin ID uniquely identifies each of the bin, the Description tells details of the bin such as location and etc.
      </p>

      <table class="table table-dark table-striped">
        <tr>
          <th>Bin ID</th>
          <th>Bin Description</th>
          <th>Bin Capacity</th>
        </tr>
        <tr>
          <td>1</td>
          <td>Block A</td>
          <td>80%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Block B</td>
          <td>80%</td>
        </tr>
      </table>
    </div>
  </div>

  <!-- Import bootstrap 4 scripts -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

它看起来很棒，我在这里和那里进行了更改，因为我使用了 bootstrap 4，而教程使用了 bootstrap 3。但这并不能解释为什么导航栏没有向右延伸。我什至在小型设备上隐藏了该段落以使其看起来更好，但它在中型设备上看起来仍然很难看。请！懒惰已经超过了我的 body。从头学bootstrap太痛苦了。尽管如此，走到这一步还是让我为自己感到骄傲。对于那些仍然忘记我在说什么的人，看看我附上的照片。

Large Device - Yayy beautiful

Small Device - Umm Sexy

Medium Device - WHAT THE FISH is happening?

P/S：我知道我知道...小设备是作弊器。导航栏根本不拉伸。它需要它宝贵的长文本才能伸展。

Answer 1

因为 div#content 是 div#wrapper 的直接子元素，所以它的行为不像通常的块元素那样。 div#wrapper 的 CSS 属性为 display: flex，这意味着您需要为其子项指定宽度以实现一致的行为。

向 div#content 添加宽度 CSS 规则应该可以解决您的问题。

#content { width: 100%; }

Bootstrap SideBar（模板）：即使下面没有长段落，我也希望内容中的导航栏能够伸展

Bootstrap SideBar (Template) : I want the navbar in the content to stretch even without long paragraph beneath

html

css

sidebar

navbar

bootstrap-4