使用 Bootstrap v4 对齐按钮

Posted 2023-03-06

【中文标题】使用 Bootstrap v4 对齐按钮

【英文标题】：Justify buttons with Bootstrap v4

【发布时间】：2016-03-30 18:26:36

【问题描述】：

Bootstrap v4 删除了 .btn-group-justified 类，请参阅 https://github.com/twbs/bootstrap/issues/17631

如何证明按钮的合理性：

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <a class="btn btn-primary" href="#" role="button">Left</a>
   <a class="btn btn-primary" href="#" role="button">Middle</a>
   <a class="btn btn-primary" href="#" role="button">Right</a>
 </div>

【参考方案1】：

对于在 Bootstrap 4 Beta 发布后发现此问题的任何人...

<div class="btn-group d-flex" role="group">
   <a href="" class="btn btn-secondary w-100">Previous</a>
   <a href="" class="btn btn-secondary w-100">Next</a>
</div>

【讨论】：

谢谢，这就是我一直在寻找的...我想我必须了解更多关于 Bootstrap 4 中的 flex 样式

应该是第一个答案，不需要自定义 CSS，不那么 hacky。干得好！

简单、锐利、干净。太棒了！

【参考方案2】：

确实缺少 nav-justify 类。暂时可以根据 TB3 的代码自行添加：

SCSS 代码

// Justified button groups
// ----------------------

.btn-group-justified 
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  .btn,
  .btn-group 
    float: none;
    display: table-cell;
    width: 1%;
    .btn 
      width: 100%;
    
    .dropdown-menu 
      left: auto;
    
  

编译的 CSS 代码

.btn-group-justified 
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate; 
  .btn-group-justified .btn,
  .btn-group-justified .btn-group 
    float: none;
    display: table-cell;
    width: 1%; 
    .btn-group-justified .btn .btn,
    .btn-group-justified .btn-group .btn 
      width: 100%; 
    .btn-group-justified .btn .dropdown-menu,
    .btn-group-justified .btn-group .dropdown-menu 
      left: auto; 

html

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <a class="btn btn-primary" href="#" role="button">Left</a>
   <a class="btn btn-primary" href="#" role="button">Middle</a>
   <a class="btn btn-primary" href="#" role="button">Right</a>
 </div>

上面的 HTML 代码现在将如下图所示：

处理边框

由于用于对齐按钮的特定 HTML 和 CSS（即display: table-cell），它们之间的边框加倍。在常规按钮组中，margin-left: -1px 用于堆叠边框而不是移除它们。但是，margin 不适用于 display: table-cell。因此，根据您对 Bootstrap 的自定义，您可能希望移除或重新着色边框。

充当按钮的链接

如果 <a> 元素用作按钮 - 触发页面内功能，而不是导航到当前页面中的另一个文档或部分 - 它们也应该被赋予适当的 role="button"。

下拉菜单

对下拉按钮使用以下 HTML 代码：

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
   <a class="btn btn-secondary" href="#" role="button">Left</a>
   <a class="btn btn-secondary" href="#" role="button">Middle</a>
    <div class="btn-group">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Action
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
      </div>
    </div>
 </div>

带有下拉按钮的对齐按钮组应如下图所示：

带有<button> 元素

要使用带有<button> 元素的对齐按钮组，

您必须将每个按钮包装在一个按钮组中

。大多数浏览器不会正确地将我们的 CSS 应用到 <button> 元素，但由于我们支持按钮下拉菜单，我们可以解决这个问题。

HTML

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <div class="btn-group" role="group">
     <button type="button" class="btn btn-secondary">Left</button>
   </div>
   <div class="btn-group" role="group">
     <button type="button" class="btn btn-secondary">Middle</button>
   </div>
   <div class="btn-group" role="group">
     <button type="button" class="btn btn-secondary">Right</button>
  </div>
 </div>

上面用于对齐带有<button>元素的按钮组的HTML代码应该如下图所示：

【讨论】：

为什么在btn-group中设置btn的宽度为1%？这是故意的吗？

【参考方案3】：

以Bass Jobsen's great answer 为基础，这里使用 flexbox 代替 display: table; 提供相同的功能

SCSS 代码

// Justified button groups
// ----------------------

.btn-group-justified 
  display: flex;
  width: 100%;
  .btn,
  .btn-group 
    flex: 1;
    .btn 
      width: 100%;
    
    .dropdown-menu 
      left: auto;
    
  

HTML

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <a class="btn btn-primary" href="#" role="button">Left</a>
   <a class="btn btn-primary" href="#" role="button">Middle</a>
   <a class="btn btn-primary" href="#" role="button">Right</a>
 </div>

请参阅Bass Jobsen's answer，了解更多关于下拉菜单、HTML 链接等的使用详情。

【讨论】：

很好，也避免了双边框问题

建议：添加 & + & margin-top: $btn-block-spacing-y; 以隔开堆叠的对齐按钮组

【参考方案4】：

当使用 class="dropdown-menu" 和 Bootstrap V4.0 时，基于上面 Chris Baswell 的解决方案和 Bootstrap 文档：https://getbootstrap.com/docs/4.0/components/button-group/#nesting

<div class="btn-group d-flex" role="group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <div class="btn-group w-100" role="group">
        <button type="button" class="btn btn-secondary dropdown-toggle-no-carret w-100" title="MANAGE ENTRIES" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Drop Down
        </button>
        <div class="dropdown-menu">
            <a href="" class="btn btn-secondary w-100">Previous</a>
            <a href="" class="btn btn-secondary w-100">Next</a>
        </div>
    </div>
</div>