Question

如何使card-header在bootstrap 4上没有边框半径？我实现了这一个但是卡片头的背景颜色与卡片头重叠，因此卡片头仍然有border-radius

.card-header {
    height: 50px;
    background-color: #000;
    border-bottom-color: #fff;
    border-top: none;
    border-radius: 0;
}

Answer 1

要删除半径，请指定一个类舍入为0 。 Bootsrap 4.

<button type="button" class="btn btn-primary rounded-0">...</button>

Answer 2

正如您在comment中所写，Bootstrap将border-radius添加到first-child的{{1}}。

我建议，这是背景颜色。

当你覆盖它时，它应该被解决：

.card-header

JSFiddle

Answer 3

你可以试试这个：

.card-header:first-child {
  border-radius: 0;
}

Answer 4

这就是我在SCSS中所做的

@if $enable-rounded == false {
  .card {
    .card-header {
      border-radius: 0;
    }
    .card-body {
      border-radius: 0;
    }
    .card-footer {
      border-radius: 0;
    }
  }
}

在加载引导程序SCSS之前，您必须包含SCSS变量$ enable-rounded。

Answer 5

这对我有用。试试

.card, .card-header, .card-body, .card-footer{
    border-radius:0px !important;
}

Answer 6

            <div class="card-tools">
              <select class="form-control" name="dropdown_media">
                      <option value="1">Active Media</option>
                      <option value="0">Blocked Media</option>
                      <option value="all_media">All Media</option>
              </select>

            </div>
          </div>

Answer 7

<div class="card"><div class="card-header">...

您需要为两个类卡＆amp;＆gt;声明 border-radius：0; 的卡头

如何使Card Header在Bootstrap 4中没有边界半径？

7 个答案: