使用Bootstrap v4对齐按钮

Question

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>

Answer 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>

Answer 2

确实缺少导航证明课程.您现在可以根据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代码现在看起来如下图所示:

处理边界

• 由于用于证明按钮(即display: table-cell)的特定HTML和CSS ,它们之间的边界加倍.在常规按钮组中,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代码应如下图所示:

Answer 3

基于Bass Jobsen的优秀答案,这里使用的是与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>

有关使用下拉列表,HTML链接等的更多详细信息,请参阅Bass Jobsen的答案.