我有一个 div,我想在其中使用带有 3 个按钮的全 Angular 按钮组。 第二个和第三个按钮“文本”将只是字体超棒的图标,所以我希望它们比第一个小。 (比如60%-20%-20%)
我试过这个片段(我还没有使用“其他两个更小”的样式,所以它必须是一个 33%-33%-33% 的按钮组)
<div class="btn-group btn-group-justified">
<button class="btn btn-default disabled">
{{$buttonText}}
</button>
<button class="btn btn-warning">
<i class="fa fa-edit"></i>
</button>
<button class="btn btn-danger">
<i class="fa fa-trash"></i>
</button>
</div>
但是整个btn-group
只占了div的25%。为什么?
最佳答案
使用对齐按钮组 <button>
元素,您必须将每个按钮包装在一个按钮组中。请在此处查看引导文档:With <button>
elements
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<div class="btn-group btn-group-justified">
<div class="btn-group" role="group">
<button class="btn btn-default disabled">
asdasd
</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-warning">
<i class="fa fa-edit"></i>
</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-danger">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
关于html - Bootstrap : Justified shrink the button,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48861688/