CSS 使用 Bootstrap v4 对齐按钮

Question

提问by Bass Jobsen

Bootstrap v4 drops the .btn-group-justifiedclass, see https://github.com/twbs/bootstrap/issues/17631

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

How to justify the button for:

如何为按钮对齐：

 <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

采纳答案by Bass Jobsen

Indeed the nav-justify class is missing. You can add it yourself based on TB3's code for now:

确实缺少导航对齐类。您现在可以根据TB3的代码自行添加：

SCSS code

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;
    }
  }
}

compiled CSS code

编译的 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>

The above HTML code now will look like that shown in the figure beneath:

上面的 HTML 代码现在看起来如下图所示：

Handling borders

处理边界

Due to the specific HTML and CSS used to justify buttons (namely display: table-cell), the borders between them are doubled. In regular button groups, margin-left: -1pxis used to stack the borders instead of removing them. However, margindoesn't work with display: table-cell. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.

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

Links acting as buttons

链接作为按钮

If the <a>elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

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

Dropdowns

下拉菜单

Use the following HTML code for dropdown buttons:

对下拉按钮使用以下 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>

The justified button group with dropdown button should look like that shown in the figure below:

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

With `<button>`elements

带`<button>`元素

To use justified button groups with <button>elements, you must wrap each button in a button group. Most browsers don't properly apply our CSS for justification to <button>elements, but since we support button dropdowns, we can work around that.

要将对齐的按钮组与<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>

The above HTML code used to justified button groups with <button>elements should look like that shown in the figure beneath:

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

Answer 2

回答by Chris Baswell

For anyone finding this after Bootstrap 4 Beta was released...

对于在 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 3

回答by Philip Stanislaus

Building on Bass Jobsen's great answer, here is the same functionality using flexbox instead of display: table;

基于Bass Jobsen 的出色回答，这里使用 flexbox 而不是相同的功能display: table;

SCSS code

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>

Please refer to Bass Jobsen's answerfor more details on usage with dropdowns, HTML Links and more.

请参阅Bass Jobsen 的回答，了解有关使用下拉菜单、HTML 链接等的更多详细信息。

Answer 4

回答by Philip Stanislaus

When using with class="dropdown-menu"with Bootstrap V4.0, based on Chris Baswell' solution above and Bootstrap Documentation: https://getbootstrap.com/docs/4.0/components/button-group/#nesting

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>

CSS 使用 Bootstrap v4 对齐按钮

提问by Bass Jobsen

采纳答案by Bass Jobsen

SCSS code

SCSS代码

compiled CSS code

编译的 CSS 代码

HTML

HTML

Handling borders

处理边界

Links acting as buttons

链接作为按钮

Dropdowns

下拉菜单

With `<button>`elements

带`<button>`元素

HTML

HTML

回答by Chris Baswell

回答by Philip Stanislaus

SCSS code

SCSS代码

HTML

HTML

回答by Philip Stanislaus

相关推荐

最近更新

标签

CSS 使用 Bootstrap v4 对齐按钮

提问by Bass Jobsen

采纳答案by Bass Jobsen

SCSS code

SCSS代码

compiled CSS code

编译的 CSS 代码

HTML

HTML

Handling borders

处理边界

Links acting as buttons

链接作为按钮

Dropdowns

下拉菜单

With <button>elements

带<button>元素

HTML

HTML

回答by Chris Baswell

回答by Philip Stanislaus

SCSS code

SCSS代码

HTML

HTML

回答by Philip Stanislaus

相关推荐

CSS 如何在引导程序中添加带有社交图标的页脚？

实现 Css 工具提示

CSS 使用溢出时在移动设备/ios 上滚动缓慢：滚动

CSS 是否可以在没有滚动条的情况下计算视口宽度 (vw)？

相关推荐

最近更新

标签

With `<button>`elements

带`<button>`元素