如何在 Bootstrap 4 中使卡片标题无边框半径？答案

【问题标题】：How to Make Card Header No Border Radius in Bootstrap 4?如何在 Bootstrap 4 中使卡片标题无边框半径？
【发布时间】：2020-08-01 16:02:56
【问题描述】：

如何使卡片标题在引导程序 4 上没有边框半径？我已经实现了这个，但是卡头的背景颜色与卡头重叠，因此卡头仍然有边框半径

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

【问题讨论】：

请看小提琴jsfiddle.net/8h9mj7f8 它没有辐射。如果我做错了什么就改变。
@AkiraSuzuki。我在 Bootstrap 4 默认文件中看到了它。为什么它在 bootstrap 4 中实现？ .card-header:first-child {border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0; }
我认为引导程序支持“卡片”类。如果你不喜欢，你可以定义“mycard”类。
我刚刚将它设为border-radius: 0 !important

标签： html css twitter-bootstrap border bootstrap-4

【解决方案1】：

要移除半径，请指定一个类 rounded-0。引导程序 4。

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

【讨论】：

【解决方案2】：

正如您在comment 中所写，Bootstrap 将border-radius 添加到.card-header 的first-child。

我建议，在这种情况下，这是背景颜色。

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

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

JSFiddle

【讨论】：

【解决方案3】：

这对我有用。试试

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

【讨论】：

【解决方案4】：

你可以试试这个：

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

【讨论】：

【解决方案5】：

这就是我在 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。

【讨论】：

【解决方案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>

【讨论】：

【解决方案7】：

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

您需要为 card 和 card-header

两个类声明 border-radius: 0;

【讨论】：

我试过这样做，但没有帮助。上述建议奏效了。