html - 如何创建非固定侧边栏(Bootstrap 网格)

Question

我只能找到固定侧边栏的解决方案(例如 Creating a fixed sidebar alongside a centered Bootstrap 3 grid )，但不能找到非固定 侧边栏的解决方案，即随内容向下滚动的侧边栏。

我正在使用 Bootstrap 网格 (Bootstrap 4):

<nav class="navbar sticky-top">...</nav>
<!--content-->
<div class="container-fluid">
 <div class="row">
  <div class="col-md-3">
     <img src="https://via.placeholder.com/150x130">
  </div>
  <div class="col-md-3">
     <img src="https://via.placeholder.com/150x130">
  </div>
  <div class="col-md-3">
     <img src="https://via.placeholder.com/150x130">
  </div>
  <div class="col-md-3">
     <img src=https://via.placeholder.com/150x130">
  </div>
  <div class="row">
   ...
 </div>
</div>

我需要在这个内容的左侧，但在我的顶部导航栏下方有一个侧边栏。我该怎么做？

(我需要的行数未定义。它们稍后将由 php 循环生成，所以我不认为我可以将侧边栏放在网格系统中)

Answer 1

只需将内容放在一个包装器中，在其之前放置另一个 DIV，将它们包裹起来并应用通常的类来划分页面宽度:

<nav class="navbar sticky-top">...</nav>
<!--content-->
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 sidebar">
      SIDEBAR
    </div>
    <div class="col-md-10">
      <div class="row">
        <div class="col-md-3">
          <img src="https://via.placeholder.com/150x130">
        </div>
        <div class="col-md-3">
          <img src="https://via.placeholder.com/150x130">
        </div>
        <div class="col-md-3">
          <img src="https://via.placeholder.com/150x130">
        </div>
        <div class="col-md-3">
          <img src="https://via.placeholder.com/150x130">
        </div>
      </div>
      <div class="row">
        some other content...
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/XZedxM