没有崩溃boostrap 3的侧边栏

Question

Objective:

我想创建一个boostrap 3布局侧边栏，而不会像bitbucket那样崩溃。我想做的是不写或（最少）自定义样式。

What I tried:

<div class="row">
 <div class="col-lg-2" >
   <div class="row">
     <div class="col-lg-3" style="border:1px solid red;">menu</div>
     <div class="col-lg-9" style="border:1px solid red;">left menu</div>
   </div>
 </div>
 <div class="col-lg-7" style="border:1px solid red;">
   <div class="row">
     <div class="col-lg-6">content</div>
     <div class="col-lg-6">content</div>
   </div>
 </div>
</div>

问题 ： 我必须将内容分为3部分

1. 左侧边栏（不折叠），
2. 少量内容（col-**-1）
3. 主要内容

但是左侧菜单产生了问题，我想要列的宽度（0.5） 只需col-**-0.5即可保持响应速度。

请提出建议

Answer 1

如前所述，您需要col-**-0.5，这是不可能的。您需要使用自定义css进行设置。您可以为reference进行检查。您可以通过这种方式进行

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-2 text-center" style="border:1px solid red;height: -webkit-fill-available;">
      <div class="row">
        <div class="col-lg-12" style="border:1px solid red;">menu</div>
        <div class="col-lg-12"> menu-1</div>
        <div class="col-lg-12"> menu-2</div>
      </div>
    </div>
    <div class="col-xs-3" style="border:1px solid red;">
      <div class="row">
        <div class="col-lg-12">content</div>
        <div class="col-lg-12">content</div>
      </div>
    </div>
    <div class="col-xs-7" style="border:1px solid red;">
      <div class="row">
        <div class="col-lg-12">content</div>
        <div class="col-lg-12">content</div>
      </div>
    </div>
  </div>
</div>