消除Twitter Bootstrap中所有圆角

Question

我喜欢 Twitter Bootstrap 2.0 - 我喜欢它是一个完整的库...但是我想对一个非常方框的网站进行全局修改，就是摆脱 Bootstrap 中的所有圆角...

这是大量的 CSS 要处理。有没有全局开关，或者找到和替换所有的“rounded”的最佳方法是什么？

- ina

---

您是想要移除所有圆角还是只是一些圆角呢？ - Andres Ilich

如果您无法修改您当前拥有的内容，我创建了一个mod文件，其中所有边框半径均设置为0：http://mkamyszek.tumblr.com/post/61791361233/remove-all-border-radius-in-twitter-bootstrap - Mark Kamyszek

Ina，我的回答对你有用吗？能否标记为正确答案？ - BrunoS

是的。谢谢！.. 但为什么要点踩呢？ - ina

Answer 1

我将所有元素的 border-radius 属性设置为 "0"，像这样：

* {
  border-radius: 0 !important;
}

我确定我不想稍后覆盖这个，所以我只使用!important。

如果您没有编译您的less文件，只需执行以下操作：

* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

在Bootstrap 3中，如果您正在进行编译，则现在可以在variables.less文件中设置边框半径。

@border-radius-base:        0px;
@border-radius-large:       0px;
@border-radius-small:       0px;

在 Bootstrap 4 中，如果你在编译它，你可以在 _custom.scss 文件中完全禁用半径：

$enable-rounded:   false;

- BrunoS

---

这是一个非常好的解决方案，如果你想要自定义Bootstrap而不用触碰核心文件。很棒的答案！ - marty

当然，快速而简单！ - programmer

我曾经使用过这段代码： -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; }``` 它在Bootstrap 3.2上运行得非常完美。感谢你的修复！ - Todor Todorov

这个解决方案不适用于使用Bootstrap样式的<select>输入。可能是由于使用了“-webkit-appearance: menulist”。 - johnsorrentino

$enable-rounded: false; 也适用于 Bootstrap 5 Sass，供您参考。 - Adrian Tollis

Answer 2

下载源代码中的.less文件，并将.border-radius()mixin留空。

- SLaks

---

这可能是在掌握Bootstrap CSS处理效率方面最好的解决方案。 - klewis

Answer 3

如果您使用的是Bootstrap版本 < 3 ...

使用Sass/Scss

$baseBorderRadius: 0;

更少的

@baseBorderRadius: 0;

在导入Bootstrap之前，您需要设置此变量。这将影响所有的井和导航栏。

更新

如果您使用的是Bootstrap 3，则baseBorderRadius应该是border-radius-base

- adamwong246

Answer 4

如果您想避免重新编译所有内容，则只需在CSS中添加.btn {border-radius: 0;}。

- yves amsellem

---

它只会影响按钮和您添加了 .btn 的任何地方。 - zVictor

Answer 5

code,
kbd,
pre,
.img-rounded,
.img-thumbnail,
.img-circle,
.form-control,
.btn,
.btn-link,
.dropdown-menu,
.list-group-item,
.input-group-addon,
.input-group-btn,
.nav-tabs a,
.nav-pills a,
.navbar,
.navbar-toggle,
.icon-bar,
.breadcrumb,
.pagination,
.pager *,
.label,
.badge,
.jumbotron,
.thumbnail,
.alert,
.progress,
.panel,
.well,
.modal-content,
.tooltip-inner,
.popover,
.popover-title,
.carousel-indicators li {
    border-radius:0 !important;
}

- ymakux

Answer 6

Bootstrap拥有自己的边框类，包括.rounded-0，可以消除任何元素（包括按钮）的圆角。详见：https://getbootstrap.com/docs/4.4/utilities/borders/#border-radius。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="btn btn-primary">Regular Rounded Corners</a>
<a class="btn btn-primary rounded-pill">Pill Corners</a>
<a class="btn btn-primary rounded-0">Square Corners</a>

- Ergec

Answer 7

这个问题很老了，但即使在与Bootstrap 4相关的搜索中也非常明显。我认为值得添加一个答案来禁用 BS4 的圆角。

在_variables.scss中，存在几个全局修饰符，可以快速更改诸如启用或禁用 flex gird 系统、圆角、渐变等内容:

$enable-flex:          false !default;
$enable-rounded:       true !default; // <-- This one
$enable-shadows:       false !default;
$enable-gradients:     false !default;
$enable-transitions:   false !default;

圆角效果默认为启用状态。

如果您像我一样更喜欢使用Sass编译Bootstrap 4并使用自己的_custom.scss文件（或使用官方的自定义工具），只需覆盖相关变量即可：

$enable-rounded : false

- edigu

---

一旦Bootstrap 4走红，你就是最棒的；）对于那些已经在alpha中使用它的人来说，这将成为被接受的答案，但现在它还很隐蔽。 - kub1x

Answer 8

使用SASS Bootstrap，如果您正在编译Bootstrap本身，则可以将所有边框半径（或更具体地）简单设置为零：

$border-radius:               0;
$border-radius-lg:            0;
$border-radius-sm:            0;

- Blackbam

---

没错。将这些声明放在例如 @import "../node_modules/bootstrap/scss/bootstrap"; 之前，bootstrap 就不会覆盖它们，因为它们在 bootstrap 源代码中是用 !default 关键字声明的。 - Jeppe

Answer 9

.btn {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

或者定义一个mixin，并在您想要不带圆角的按钮的任何位置包含它。

@mixin btn-round-none {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

.btn.btn_1 {
@inlude btn-round-none
}

- tomruss

---

通常我会保留“px”，这样如果我需要更改值，就不必再次输入“px”。 - nkkollaw

但是数据的额外字节 - Anthony Shaw

Answer 10

当使用Bootstrap大于等于3.0的源文件（SASS或LESS）时，如果只有一个元素使您感到困扰，您不必将所有元素的圆角都去掉，例如，仅在导航栏上去掉圆角，请使用以下方式：

使用SCSS：

$navbar-border-radius: 0;

使用LESS：

@navbar-border-radius: 0;

然而，如果你确实想要取消所有圆角，你可以像@adamwong246所提到的那样使用：

$baseBorderRadius: 0;
@baseBorderRadius: 0;

那两个设置是“根”设置，其他设置（如navbar-border-radius）将从中继承，除非指定了其他值。

要查看所有变量的列表，请查看variables.less或variables.scss。

- cwd