在同一行上拉伸两个按钮全宽 - Bootstrap 4答案

【问题标题】：Stretch two buttons full width on the same line - Bootstrap 4在同一行上拉伸两个按钮全宽 - Bootstrap 4
【发布时间】：2022-02-10 14:15:21
【问题描述】：

如果我有两个按钮组件（有一个 btn-block 类，虽然它们不是必须的），我怎样才能让它们在同一行，全宽？我知道如何“手动”实现这一目标。问题是，我必须只使用实用程序类来做到这一点。因此，如果可能的话，当然不需要额外的 CSS。

请帮忙！谢谢。

【问题讨论】：

标签： html bootstrap-4

【解决方案1】：

您将无法拥有“同一行上的两个全宽按钮”，因为它们会相互重叠，而且坦率地说，没有任何实际用途。

这可能也不是最好的方法，但要使用 Bootstrap 4 实现可能接近您想要的目标，可以通过以下方式完成：

在同一行上有两个按钮，宽度为 50%

<div class="row">
 <div class="col-6">
  <!-- BUTTON 1 HERE -->
 </div>
 <div class="col-6">
 <!-- BUTTON 2 HERE -->
 </div>    
</div>

或者两个按钮的宽度都为 100%，但行不同

<div class="row">
 <div class="col-12">
  <!-- BUTTON 1 HERE -->
 </div>
 <div class="col-12">
 <!-- BUTTON 2 HERE -->
 </div>    
</div>

【讨论】：

是的，我同意另外在引导程序之前这是一个问题，[github.com/twbs/bootstrap/issues/13647]（btn-block class for different breakpoints #13647）[github.com/twbs/bootstrap/issues/20617]（Responsive .btn-block #20617） .

【解决方案2】：

试试这个代码。我已经连续添加了 2 个 col 并将 btn-block 用于按钮类。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

  <div>
    <div class="row">
      <div class="col">
        <button class="btn btn-primary btn-block">button#1</button>
      </div>
      <div class="col">
        <button class="btn btn-primary btn-block">button#2</button>
      </div>
    </div>
  </div>

【讨论】：

【解决方案3】：

我在 ASP.NET MVC 项目中开发 Razor View Page 时正在使用 Bootstrap 5。我解决了一个类似的问题如下：

.myButtonStyle{
  width: 100% !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

<div class="row">
  <div class="col-md-4">
    <a href="#" class="btn btn-primary myButtonStyle" role="button">Change Image</a>
  </div>

  <div class="col-md-4">
    <a href="#" class="btn btn-success disabled myButtonStyle" role="button">Save</a>
  </div>

  <div class="col-md-4">
    <a href="#" class="btn btn-danger disabled myButtonStyle" role="button">Discard</a>
  </div>
</div>

下图是同一行按钮的图片：

【讨论】：