时间戳

首页 > 解决方案 > 引导关闭画布高度到内容

html - 引导关闭画布高度到内容

问题描述

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

标签： htmlcsstwitter-bootstrapbootstrap-5

解决方案

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

推荐阅读