摆脱 Twitter Bootstrap 中的所有圆角

Question

在 Twitter Bootstrap 2.0 中，我想对一个非常四四方方的非圆形网站进行全局修改：去掉 Bootstrap 中的所有圆角。

是否有全局开关，或者查找和替换所有圆角的最佳方法是什么？

Answer 1

我将所有元素的边框半径设置为“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;

Answer 2

下载源

.less

文件并将

.border-radius()

mixin 设为空白。

Answer 3

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

使用 sass/scss

$baseBorderRadius: 0;

少了

@baseBorderRadius: 0;

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

更新

如果您使用 Bootstrap 3

baseBorderRadius 应该是 border-radius-base

Answer 4

如果您想避免重新编译所有内容，只需将

.btn {border-radius: 0;}

 添加到您的 CSS 中即可。

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;
}

Answer 6

Bootstrap 有自己的边框类，包括

.rounded-0

，以消除任何元素上的圆角，包括 

buttons

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>

Answer 7

这个问题相当老了，但它在搜索引擎上非常明显，即使在

Bootstrap 4 相关搜索中也是如此。我认为值得添加一个禁用圆角的答案，BS4 方式。

在

_variables.scss

中有几个全局修改器可以快速更改内容，例如启用或禁用柔性网格系统、圆角、渐变等。:

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

默认情况下，圆角为

enabled

。

如果您喜欢使用 Sass 和您自己的

_custom.scss

（或使用官方定制器）编译 Bootstrap 4，则覆盖相关变量就足够了：

$enable-rounded : false

Answer 8

使用 SASS Bootstrap - 如果您自己编译 Bootstrap - 您可以将所有边框半径（或更具体）简单地设置为零：

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

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
}

Answer 10

当使用 Bootstrap >=

3.0

 源文件（

SASS

 或 

LESS

）时，如果只有一个元素困扰着你，那么你不必去掉所有东西上的圆角，例如，摆脱导航栏上的圆角，使用：

使用 SCSS：

$navbar-border-radius: 0; 更少：

@navbar-border-radius: 0; 但是，如果您确实想摆脱所有东西上的圆角，您可以执行@adamwong246提到的操作并使用：

$baseBorderRadius: 0;
@baseBorderRadius: 0;

这两个设置是“根”设置，其他设置（如

navbar-border-radius

）将从其继承，除非指定其他值。

要查看所有变量的列表，请查看

variables.less 或 variables.scss

Answer 11

@BrunoS 上面发布的代码对我不起作用，

* {
  .border-radius(0) !important;
}

我用的是

* {
  border-radius: 0 !important;
}

我希望这对某人有帮助

Answer 12

有一个非常简单的方法来定制 Bootstrap：

只需访问
1. http://getbootstrap.com/customize/
找到所有“半径”并根据需要修改它们。
单击“编译并下载”并享受您自己的 Bootstrap 版本。

Answer 13

如果您使用 bootstrap，您可以只使用 bootstrap class="rounded-0" 使边框具有锐边，没有圆角

<button class="btn btn-info rounded-0"">Generate</button></span>

Answer 14

或者您可以将其添加到要从中删除边框半径的元素的 html 中（这样您就不会从所有按钮/元素中删除它）：

style="border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;"

Answer 15

您可能还想看看

FlatStrap。它为 Bootstrap CSS 提供了 Metro 风格的替代品，没有圆角、渐变和阴影。

Answer 16

我创建了另一个css文件并添加以下代码 并非所有元素都包含在内

/* Flatten das boostrap */
.well, .navbar-inner, .popover, .btn, .tooltip, input, select, textarea, pre, .progress, .modal, .add-on, .alert, .table-bordered, .nav>.active>a, .dropdown-menu, .tooltip-inner, .badge, .label, .img-polaroid, .panel {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
    border-collapse: collapse !important;
    background-image: none !important;
}