btn-group创建第一个按钮太高

时间:2018-10-01 08:40:02

标签: html css bootstrap-4

我正在使用import { MatCheckbox } from "@angular/material"; btn-group的宽度设置为100%,效果很好,但第一个按钮却得到了奇怪的结果,实际上,如果您看一下图片,就可以看到:

enter image description here

您会看到第一个按钮的高度过高,另外两个按钮过高。为什么会这样?

这是我的代码:

buttons

这是JSFIDDLE

3 个答案:

答案 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