Bootstrap offcanvas 高度到内容

Question

.cursor-pointer {
  cursor: pointer;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet"/>
<button class="btn btn-primary m-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-body p-0 h-50">
    <ul class="list-unstyled m-0 fs-5">
      <li class="bg-danger text-light px-3 py-2">
        <i class="bi bi-trash"></i>
        Delete
      </li>
      <li class="bg-primary text-light px-3 py-2">
        <i class="bi bi-pin"></i>
        Pin
      </li>
    </ul>
  </div>
</div>

如何使代码中的内容适合高度？我尝试了 d-inline 和 h-50 但没有任何效果。有帮助吗？

Answer 1

将 h-auto 添加到 offcanvas 元素。

.cursor-pointer {
  cursor: pointer;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet"/>
<button class="btn btn-primary m-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
<div class="offcanvas offcanvas-bottom h-auto" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-body p-0 h-50">
    <ul class="list-unstyled m-0 fs-5">
      <li class="bg-danger text-light px-3 py-2">
        <i class="bi bi-trash"></i>
        Delete
      </li>
      <li class="bg-primary text-light px-3 py-2">
        <i class="bi bi-pin"></i>
        Pin
      </li>
    </ul>
  </div>
</div>

Answer 2

.offcanvas-top.h-auto {
    bottom: initial;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet"/>
<button class="btn btn-primary m-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
<div class="offcanvas offcanvas-bottom h-auto" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-body p-0">
    <ul class="list-unstyled m-0 fs-5">
      <li class="bg-danger text-light px-3 py-2">
        <i class="bi bi-trash"></i>
        Delete
      </li>
      <li class="bg-primary text-light px-3 py-2">
        <i class="bi bi-pin"></i>
        Pin
      </li>
    </ul>
  </div>
</div>

不需要在.offcanvas-body上设置高度，只需要在offcanvas上杀死bottom:0即可。

Bootstrap offcanvas 高度到内容

Bootstrap offcanvas height to content

html

css

twitter-bootstrap

bootstrap-5