引导关闭画布高度到内容答案

【问题标题】：Bootstrap offcanvas height to content引导关闭画布高度到内容
【发布时间】：2021-08-05 18:19:29
【问题描述】：

.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，但没有任何效果。有什么帮助吗？

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-5

【解决方案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>

【讨论】：

【解决方案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即可。

【讨论】：