为什么 Bootstrap btn 需要 width:100% 才能使引导按钮变为全宽？不应该显示：阻止；默认情况下使按钮全宽？答案

【问题标题】：Why Bootstrap btn needs width:100% to make bootstrap button go full width? shoudn't display:block; make button full width by default?为什么 Bootstrap btn 需要 width:100% 才能使引导按钮变为全宽？不应该显示：阻止；默认情况下使按钮全宽？
【发布时间】：2023-03-08 19:10:02
【问题描述】：

我可以解决这个问题，但我觉得我不完全理解某些东西。我习惯了，每当您将display:block; 应用于元素时，它都会自动变为全宽。但是，当我将 d-block 类应用于引导程序 4 按钮 (.btn) 时，除非我添加 width:100%; css 属性或 .w-100 类，否则它不会全宽。

我知道.btn-block 类允许使按钮全宽，但这并不理想，当您只希望按钮在某个断点处全宽时。

编辑：

对于那些要求代码的人： https://codepen.io/samaxe/pen/LYERYxq

【问题讨论】：

请发布您的代码。如果不知道按钮包含在什么中，就很难知道为什么
一定有其他的 CSS 导致了这个...<button type="button" class="btn btn-primary btn-block">button with btn-block</button> 是使用 bootstrap-4 的全宽
@Zim 查看编辑，添加代码笔
我认为这不是 Bootstrap 问题。这就是按钮（以及输入、选择等）的行为方式，如下所述：stackoverflow.com/questions/4567988/…

标签： bootstrap-4

【解决方案1】：

explained here 按钮（如输入、选择、图像等）具有元素本身的固有大小。

但是，如果你想让按钮宽度响应而不使用网格列，你可以把它放在一个 flexbox 容器中。

例如，这里是中等和向下的 100% 宽度（lg 和向上的自动宽度）...

   <div class="p-5 d-flex">
        <button type="button" class="btn btn-primary flex-grow-1 flex-lg-grow-0">button</button>
   </div>

Codeply demo

【讨论】：