如何在侧边栏显示滚动条

问题描述 投票：0回答：1

我正在设计一个查看广告页面。我对引导程序不是很了解。我想在过滤器中有一个滚动条来浏览所有内容。当用户浏览主要部分中的广告时，过滤器应保持固定。

<head>
<link
rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
</head>
<body>

<div class="container-fluid">
  <div class="row">
    <div
      class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"
      id="sidebar"
    >
      <form class="needs-validation" novalidate>
        <div class="mb-3">
          <label for="view">View</label>
          <select class="form-control" id="view" name="view">
            <option value="gallery">Gallery</option>
            <option value="list">List</option>
          </select>
        </div>
        <div class="mb-3">
          <label for="sort">Sort</label>
          <select class="form-control" id="sort" name="sort" value="">
            <option value="newest">Newest</option>
            <option value="oldest">Oldest</option>
          </select>
        </div>
        <div class="mb-3">
          <input
            type="checkbox"
            class="form-check-input"
            id="has_images"
            name="has_images"
          />
          <label class="form-check-label" for="has_images">Has Images</label>
        </div>
         
        <div class="d-flex justify-content-between">
          <button type="submit" class="btn btn-outline-primary">Reset</button>
          <button type="submit" class="btn btn-primary">Apply</button>
        </div>
      </form>
    </div>
    <main class="col-md-9 col-lg-10 px-md-4">
      <div class="d-flex justify-content-end pt-3 pb-2 mb-3 border-bottom">
        <button
          class="btn btn-secondary d-md-none"
          type="button"
          data-toggle="collapse"
          data-target="#sidebar"
        >
          Toggle Filters
        </button>
      </div>
    </main>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>

如图所示： filter with scrollbar

我尝试在侧边栏添加“position=fixed”，但主要广告与侧边栏重叠。

html css bootstrap-5
1个回答
0
投票

您需要向侧边栏添加一些固定高度和溢出。下面是工作示例，我添加了 

height: 300px
和 
overflow: auto
作为示例，您可以添加您喜欢的任何高度。

#sidebar {
  height: 300px;
  overflow: auto;
}
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse" id="sidebar">
        <form class="needs-validation" novalidate>
          <div class="mb-3">
            <label for="view">View</label>
            <select class="form-control" id="view" name="view">
              <option value="gallery">Gallery</option>
              <option value="list">List</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="sort">Sort</label>
            <select class="form-control" id="sort" name="sort" value="">
              <option value="newest">Newest</option>
              <option value="oldest">Oldest</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="sort">Sort</label>
            <select class="form-control" id="sort" name="sort" value="">
              <option value="newest">Newest</option>
              <option value="oldest">Oldest</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="sort">Sort</label>
            <select class="form-control" id="sort" name="sort" value="">
              <option value="newest">Newest</option>
              <option value="oldest">Oldest</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="sort">Sort</label>
            <select class="form-control" id="sort" name="sort" value="">
              <option value="newest">Newest</option>
              <option value="oldest">Oldest</option>
            </select>
          </div>
          <div class="mb-3">
            <input type="checkbox" class="form-check-input" id="has_images" name="has_images" />
            <label class="form-check-label" for="has_images">Has Images</label>
          </div>

          <div class="d-flex justify-content-between">
            <button type="submit" class="btn btn-outline-primary">Reset</button>
            <button type="submit" class="btn btn-primary">Apply</button>
          </div>
        </form>
      </div>
      <main class="col-md-9 col-lg-10 px-md-4">
        <div class="d-flex justify-content-end pt-3 pb-2 mb-3 border-bottom">
          <button class="btn btn-secondary d-md-none" type="button" data-toggle="collapse" data-target="#sidebar">
          Toggle Filters
        </button>
        </div>
      </main>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.