我有一个“right-float”分类的 div 放置在“w-100”分类的 div 内。在右浮动的 div 内，我想在顶部显示一个按钮，里面有 3 个点 (...)，在底部显示另一个图标(见下图)。因此，我将“h-100”类添加到 float-right div 中，并在其中创建了两个 div:第一个带有 ... 按钮，第二个带有“align-bottom”类。
问题
第二个 div 没有停留在底部，我认为是因为 h-100 没有按预期工作
观察到的行为
预期行为
HTML 树
示例片段
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3c31312a2d2a2c3f2e1e6a706b706d" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="clearfix w-100 border border-primary">
<div class="float-right h-100">
<div class="clearfix">
<div class="float-right">
<button class="btn btn-sm btn-primary">...</button>
</div>
</div>
<div class="align-bottom clearfix">
<div class="float-right">
<button class="btn btn-sm btn-primary">BTN2</button>
</div>
</div>
</div>
<div>
<div>FOO</div>
<div>FOO2</div>
<div>FOO3</div>
</div>
</div>
</body>
</html>最佳答案
h-100 按预期工作，因为高度是内部子元素的 100%。无法将 div 拉伸(stretch)到其父级高度。
您可以使用flex ，使其正常工作
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6c4c9c9d2d5d2d4c7d6e69288938895" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="d-flex align-items-stretch border border-primary">
<div class="flex-grow-1">
<div>FOO</div>
<div>FOO2</div>
<div>FOO3</div>
</div>
<div class="d-flex flex-column bg-danger">
<div class="flex-grow-1">
<button class="btn btn-sm">...</button>
</div>
<div>
<button class="btn btn-sm">BTN2</button>
</div>
</div>
</div>
</body>
</html>关于html - Bootstrap div 未按预期放置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66206945/