摆脱Twitter Bootstrap中的所有圆角

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

需要大量的CSS。是否有全局转换，或者找到并替换所有四舍五入的最佳方法是什么？

我将所有元素的边框半径设置为“ 0”，如下所示：

* {
  border-radius: 0 !important;
}

因为我确定以后不想覆盖它，所以我只使用！important。

如果您不编译较少的文件，请执行以下操作：

* {
  -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文件中一起禁用radius ：

$enable-rounded:   false;

下载源.less文件，并将.border-radius()mixin空白。

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

与sass / scss

$baseBorderRadius: 0;

用更少

@baseBorderRadius: 0;

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

更新资料

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

如果要避免重新编译所有内容，只需将其添加.btn {border-radius: 0;}到CSS中即可。

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

这个问题已经很老了，但是即使在与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;

enabled默认情况下，圆角是。

如果您更喜欢使用Sass和_custom.scss像我这样的人（或使用官方定制程序）来编译Bootstrap 4 ，则覆盖相关变量就足够了：

$enable-rounded : false

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

使用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

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

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

我用的是

* {
  border-radius: 0 !important;
}

我希望这可以帮助别人

有一个非常简单的自定义Bootstrap的方法：

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

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

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

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

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

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>

您可能还想看看FlatStrap。它提供了Bootstrap CSS的Metro风格替代品，而没有圆角，渐变和阴影。

如果您使用的是Bootstrap，则可以使用bootstrap class =“ rounded-0”来使边框具有不带圆角的尖锐边缘 <button class="btn btn-info rounded-0"">Generate</button></span>

我创建了另一个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;
}