PROSAGA码农传奇-html/HTML5-无法修复左侧边栏[重复]

0# 撩心 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    这不适合你的原因是因为row的显示类型为flex，所以下面的所有col都适合该行。
  </p>
  <P>
    然后你的cols是通过给定值间隔的块，例如col-3 col-4等
  </p>
  <P>
    通过更改列显示类型（在示例中为固定）将其从弹性间距中移除，因此主导航将向左移动，因为您没有偏移它。
  </p>
  <P>
    要解决此问题，请不要像其他人建议的那样添加填充，BootStrap具有处理此问题的类。相反，将offset-2添加到主导航，并保留其他所有内容。
  </p>
  <P>
    的<strong>
      示例代码段
    </强>
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          #sideNav {
  background-color: #012d20;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  border-right-style: groove;
  height: 100vh;
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<main class="col-10 offset-2">
    ...
  </main>
</div>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>

1# 圈圈红 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    让我们尝试一下，
  </p>
  <P>
    我为sideNav增加了大约40px的宽度;同样的padding-left iam放了#main-content。
  </p>
  <P>
    HTML
  </p>
   <pre>
    <code>
                <div class="row">
            
            <div class="col-2 pt-5" id="sideNav">
            <p>paragraph...</p>
           </div>
           
           <main class="col-10" id="main-content">
             <p>paragraph...</p>
             <p>paragraph...</p>
           </main>
           </div>

</code>
  </pre>
  <P>
    CSS
  </p>
   <pre>
    <code>
              #sideNav {
            background-color: #012d20;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            overflow: hidden;
            border-right-style: groove;
            height: 100%;
            width:40px;
         }

#main-content{
          width:100%;
          float:left;
          padding:0 0 0 40px;
          background:yellow;
         }

</code>
  </pre>
</DIV>

2# 不想吃东西 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    我看到你正在使用自举网格，所以为了保持网格正常工作，我建议你将固定容器放入
     <code>
      .col-2
    </code>
     DIV
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
           #sideNav {
      background-color: #012d20;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      overflow: hidden;
      border-right-style: groove;
      height: 100vh;
    }
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<main class="col-10">
        ...
      </main>
    </div>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>

3# نسر الصحراء | 2019-08-31 10-32