防止 Bootstrap 按钮填充 flexbox
Posted
技术标签:
【中文标题】防止 Bootstrap 按钮填充 flexbox【英文标题】：Preventing Bootstrap button from filling flexbox 【发布时间】：2018-11-25 20:37:45 【问题描述】：我将d-flex 和flex-column 类添加到Bootstrap card-body 类中，以便将包含的按钮与卡片底部对齐，正如this question's 最佳答案中所建议的那样。我的问题是这样做会导致按钮变宽以填充卡片。如何让按钮恢复收缩以适应按钮的文本，就像在添加 flex 类之前所做的那样？
...
<div class="row pt-4" id="cards">
<div class="card-deck">
// THIS IS THE CARD WITH THE WIDENED BUTTON
<div class="card">
<img class="card-img-top img-fluid" src="url_for('static', filename='volunteer.png')" >
<div class="card-body d-flex flex-column">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
<a href="#" class="btn btn-primary mt-auto">Set a Goal</a>
</div>
</div>
// THIS CARD'S BUTTON SHRINKS TO FIT ITS TEXT
<div class="card">
<img class="card-img-top img-fluid" src="url_for('static', filename='spirituality.png')" >
<div class="card-body">
<h5 class="card-title">Spirituality</h5>
<p class="card-text">Connect to something larger than yourself</p>
<a href="#" class="btn btn-primary">Set a Goal</a>
</div>
</div>
...
</div>
</div>
...
以下是按钮的外观：
【问题讨论】：
看起来不错，还有更多可以点击。如果可以，请留下它。 谢谢@wazz。这是一个很好的观点，所以我想我会保持原样。 【参考方案1】：只需将锚点包裹在另一个 div 中
<div>
<a href="#" class="btn btn-primary mt-auto">Set a Goal</a>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row pt-4" id="cards">
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="url_for('static', filename='volunteer.png')" >
<div class="card-body d-flex flex-column">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
<div>
<a href="#" class="btn btn-primary mt-auto">Set a Goal</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>或
只需在 flex div 上添加 align-items-center 类
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row pt-4" id="cards">
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="url_for('static', filename='volunteer.png')" >
<div class="card-body d-flex flex-column align-items-center">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
<a href="#" class="btn btn-primary mt-auto">Set a Goal</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>【讨论】：
谢谢@Nandita。将align-items-center 添加到类修复了宽度问题并保持按钮底部对齐。另一方面，添加 div 修复了宽度问题，但删除了底部对齐。
您能否解释一下为什么您的每条建议都具有解决宽度问题的效果？
好的。我不知道您的要求是什么，所以添加了两个答案:)
默认情况下，align-items 属性值为'stretch'，它将每个 flex 子元素拉伸到 flex 父元素的全宽。所以添加 align-items : center 不再拉伸按钮
为按钮添加 div 使按钮不再是 flex 元素的直接子元素，因此不会影响它。现在包装按钮的 div 将采用全宽，但按钮将仅根据其中的内容采用宽度:)【参考方案2】：
对于您的按钮类，添加mx-auto 使按钮居中，添加mt-auto 以按下卡片底部的按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row pt-4" id="cards">
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="url_for('static', filename='volunteer.png')" >
<div class="card-body d-flex flex-column align-items-center">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
<a href="#" class="btn btn-primary mt-auto mx-auto">Set a Goal</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
【讨论】：
以上是关于防止 Bootstrap 按钮填充 flexbox的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 4 导航栏和内容填充高度 flexbox