如何在Bootstrap 4中使卡片头部没有边框半径？

Question

如何在Bootstrap 4中使卡头没有边框半径？我已经实施了以下方法，但是卡头的背景色会重叠在卡头上，因此卡头仍具有边框半径。

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

- Joseph

---

请查看 fiddle https://jsfiddle.net/8h9mj7f8/，它没有圆角。如果我做错了什么，请更改。 - Pig and Cat

@AkiraSuzuki。我在Bootstrap 4的默认文件中看到了它。为什么要在Bootstrap 4中实现它？.card-header:first-child { border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0; } - Joseph

我认为Bootstrap支持“card”类。如果您不喜欢它，您可以定义“mycard”类。 - Pig and Cat

我刚刚将它设置为border-radius: 0 !important。 - Joseph

Answer 1

要移除圆角，请指定一个类 rounded-0。Bootstrap 4。

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

- dev-siberia

Answer 2

正如您在评论中所写，Bootstrap会给.card-header的first-child添加border-radius。

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

当您覆盖它时，问题应该就解决了：

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

JSFiddle

- drews

Answer 3

这对我有用。尝试一下。

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

- ARGVN

Answer 4

你可以尝试这个：

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

- Blues Clues

Answer 5

这是我在SCSS中的做法

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

在加载 Bootstrap SCSS 之前，您必须包含 SCSS 变量 $enable-rounded。

- MrLobster

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>

- user14032328

Answer 7

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

你需要在两个类 card 和 card-header 中声明 border-radius: 0;

- Jepf

---

我尝试过这样做，但没有帮助。上面的建议起作用了。 - Teddy Markov