Bootstrap 响应式按钮大小答案

【问题标题】：Bootstrap responsive button sizeBootstrap 响应式按钮大小
【发布时间】：2021-04-06 19:04:33
【问题描述】：

我正在使用 Bootstrap，并且 div 中的三个按钮的宽度会根据它们的屏幕尺寸做出响应。目前我只是对按钮应用固定宽度，以便它们即使在最小的屏幕上也能保持一排。这意味着桌面和大型平板电脑上的按钮很小，左右间距很大。如何使按钮根据屏幕尺寸增大和缩小？谢谢

<div class="card-footer">
<a href="#" class="btn btn-primary float-left">Btn1</a>
<a href="#" class="btn btn-primary">Btn2</a>
<a href="#" class="btn btn-primary float-right">Btn3</a>
</div>

【问题讨论】：

width 33% 不适合吗？
伙计，33% 的人没有，但只是尝试了 30% 并且成功了，意识到填充将其推倒。哇感觉好傻！我必须删除这个:-)

标签： html css twitter-bootstrap

【解决方案1】：

将.nowrap{white-space: nowrap;} 添加到您的 CSS

在这一行添加nowrap

<div class="card-footer nowrap">
//
</div>

见小提琴：https://jsfiddle.net/DIRTY_SMITH/rvm49wfa/4/

【讨论】：

【解决方案2】：

这样用

<div class="card-footer d-flex justify-content-between">
   <a href="#" class="btn btn-block btn-primary">Btn1</a>
   <a href="#" class="btn btn-primary m-0 btn-block mx-4">Btn2</a>
   <a href="#" class="btn btn-block m-0 btn-primary">Btn3</a>
</div>

https://jsfiddle.net/lalji1051/3504rLso/3/

【讨论】：