问题描述
Bootstrap v4删除了.btn-group-justified
类,请参见 https://github.com/twbs/bootstrap/issues/17631
Bootstrap v4 drops the .btn-group-justified
class, see 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>
推荐答案
确实缺少nav-justify类.您现在可以根据TB3的代码自己添加它:
Indeed the nav-justify class is missing. You can add it yourself based on TB3's code for now:
// 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代码现在将如下图所示:
The above HTML code now will look like that shown in the figure beneath:
- 由于用于对齐按钮(即
display: table-cell
)的特定HTML和CSS,它们之间的边框加倍了.在常规按钮组中,margin-left: -1px
用于堆叠边框,而不是删除边框.但是,margin
不适用于display: table-cell
.因此,根据您对Bootstrap的自定义设置,您可能希望删除边框或为边框重新着色.
- 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: -1px
is used to stack the borders instead of removing them. However,margin
doesn't work withdisplay: table-cell
. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.
- 如果
<a>
元素用作按钮-触发页面内功能,而不是导航到当前页面内的另一个文档或部分,则还应为其指定适当的role="button"
.
- 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 appropriaterole="button"
.
对下拉按钮使用以下HTML代码:
Use the following HTML code for dropdown buttons:
<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:
- 要使用带有
<button>
元素的合理按钮组,您必须将每个按钮包装在一个按钮组中.大多数浏览器没有将我们的CSS正确地应用于<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.
<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代码应如下图所示:
The above HTML code used to justified button groups with <button>
elements should look like that shown in the figure beneath:
这篇关于使用Bootstrap v4调整按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!