Question

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

我使用的是自举网格（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，在它们周围换行并应用通常的类来划分页面宽度：

＆＃13;

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

＆＃13;

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

如何创建非固定侧边栏（Bootstrap网格）

1 个答案: