使用 Bootstrap v4 对齐按钮
[英] Justify buttons with Bootstrap v4
本文介绍了使用 Bootstrap v4 对齐按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Bootstrap v4 删除了 .btn-group-justified 类，参见
处理边界 由于用于对齐按钮的特定 HTML 和 CSS(即 display: table-cell)，它们之间的边框加倍.在常规按钮组中，margin-left: -1px 用于堆叠边框而不是删除它们.但是，margin 不适用于 display: table-cell.因此，根据您对 Bootstrap 的自定义设置，您可能希望删除或重新着色边框. 用作按钮的链接 如果 <a> 元素用作按钮——触发页面内功能，而不是导航到当前页面内的另一个文档或部分——它们也应该被赋予适当的role="button". 下拉菜单 为下拉按钮使用以下 HTML 代码:
<a class="btn btn-secondary" href="#" role="button">左</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">行动<div class="下拉菜单"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><a class="dropdown-item" href="#">这里还有别的东西</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">分隔链接</a>
带有下拉按钮的对齐按钮组应如下图所示:
带有 要使用带有 您必须将每个按钮包装在一个按钮组中 .大多数浏览器都没有正确地将我们的 CSS 应用到 HTML <div class="btn-group" role="group"><button type="button" class="btn btn-secondary">左</button>
<div class="btn-group" role="group"><button type="button" class="btn btn-secondary">Middle</button>
<div class="btn-group" role="group"><button type="button" class="btn btn-secondary">右</button>
上面用于用 <button> 元素对齐按钮组的 HTML 代码应该如下图所示:
Bootstrap v4 drops the .btn-group-justified class, see 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>
解决方案
Indeed the nav-justify class is missing. You can add it yourself based on TB3's code for now:
SCSS code
// 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
.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:
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: -1px is used to stack the borders instead of removing them. However, margin doesn'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.
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".
Dropdowns
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:
With <button> elements
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.
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:
这篇关于使用 Bootstrap v4 对齐按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
