我正在使用import { MatCheckbox } from "@angular/material";
将btn-group
的宽度设置为100%,效果很好,但第一个按钮却得到了奇怪的结果,实际上,如果您看一下图片,就可以看到:
您会看到第一个按钮的高度过高,另外两个按钮过高。为什么会这样?
这是我的代码:
buttons
这是JSFIDDLE。
答案 0 :(得分:1)
如果您查看Bootstrap 4的文档,则应该这样做:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="btn-group d-flex" role="group">
<a href="#" class="btn btn-primary w-100">Apple</a>
<a href="#" class="btn btn-primary w-100">Samsung</a>
<a href="#" class="btn btn-primary w-100">Sony</a>
</div>
在此处查看文档:{{3}}
已删除.btn-group-justified。作为替代,您可以将.w-100用作元素的包装。
答案 1 :(得分:0)
你在这里
<div class="btn-group btn-group-justified custom-class btn-block">
<button type="button" class="btn btn-secondary">First</button>
<button type="button" class="btn btn-secondary">Second</button>
<button type="button" class="btn btn-secondary">Third</button>
</div>
.group-start {
background-color: #0B3359 !important;
}
#sidebar {
min-height: 100vh;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
overflow: hidden;
}
.custom-class {
display: flex;
}
.custom-class .btn {
flex: 1
}
答案 2 :(得分:0)
请尝试从按钮的第二个位置移除location / {
try_files $uri $uri/ $uri.html =404;
}
。从以下链接中看到了引用:See here
.btn-block