左侧边栏内容 div 右侧内容 Bootstrap

Question

我的 HTML / CSS 网格有问题，使用 Bootstrap 制作 4. 我正在尝试使用 [= 创建左侧边栏（固定） 31=] 对内容的权利（这不会被修复）。我试过这样做，但你可以在图像中看到结果：

我真正想做的是显示与那个黑框内嵌的橙色侧边栏。我的代码是：

查看代码片段

.primary_continer {
  background-color: #4423d4;
  height: 100%;
  padding-top: 55px;
  margin: 0;
  position: relative;
  overflow: hidden;
  display: table;
}

.left_menu {
  width: 100%;
  /*235px*/
  max-width: 235px;
  height: 100%;
  background-color: #ff9303;
  padding-top: 80px;
  padding-left: 0px;
  float: left;
  position: fixed;
  display: table-cell;
}

.center_content {
  background-color: #000;
  width: 70%;
  /*700px*/
  float: right;
  position: relative;
  display: table-cell;
}

HTML:

<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><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><div class="container-fluid primary_continer">
  <div class="row justify-content-md-left">
    <div class="col col-lg-2 left_menu">
      1 of 3
    </div>
    <div class="col center_content">
      Variable width content
    </div>
  </div>
</div>

Answer 1

刚给内容margin-left（固定宽度）

.center_content {
  background-color: #000;
  width: 70%;
  float: right;
  position: relative;
  display: table-cell;
  margin-left: 235px; /*Added*/
  color:#fff;/*Added for me*/
  min-height: 100vh; /*Added newly*/
}

左侧边栏内容 div 右侧内容 Bootstrap

Left sidebar with the content div on right with Bootstrap

html

css

grid

sidebar