带有Bootstrap

Question

我的HTML / CSS网格有一个问题，使用Bootstrap 4制作。我试图创建一个左侧边栏（固定），右边有一个div用于内容（这不会被修复）。 我试过这样做，但你可以在图片中看到结果：

我真正想要做的是显示与该黑盒子内联的橙色侧边栏。我的代码是：

请参阅代码段

＆＃13;

＆＃13;

.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:

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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*/
}