我喜欢Twitter Bootstrap 2.0 - 我喜欢它是如此完整的库...但我想对一个非常四四方方的站点进行全局修改，这是为了摆脱Bootstrap中的所有圆角......
这需要很多CSS才能完成。是否存在全局切换，或者找到并替换所有舍入的最佳方式是什么？
答案 0 :(得分：310)
我将所有元素的border-radius设置为“0”，如下所示：
* {
border-radius: 0 !important;
}
因为我确定我不想在以后覆盖它，所以我只是使用！important。
如果您没有编译较少的文件，请执行以下操作：
* {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
在bootstrap 3中，如果你正在编译它，你现在可以在variables.less文件中设置radius：
@border-radius-base: 0px;
@border-radius-large: 0px;
@border-radius-small: 0px;
在bootstrap 4中，如果你正在编译它，你可以在_custom.scss文件中全部禁用radius：
$enable-rounded: false;
答案 1 :(得分：24)
下载源.less文件，并将.border-radius() mixin留空。
答案 2 :(得分：19)
如果您使用的是Bootstrap版本＆lt; 3 ...
使用sass / scss
$baseBorderRadius: 0;
少用
@baseBorderRadius: 0;
您需要在导入引导程序之前设置此变量。这将影响所有井和导航栏。
<强>更新
如果您使用的是Bootstrap 3 baseBorderRadius 应为 border-radius-base
答案 3 :(得分：18)
如果您想避免重新编译所有内容，只需将.btn {border-radius: 0;}添加到您的CSS中。
答案 4 :(得分：18)
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;
}
答案 5 :(得分：5)
.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
}
答案 6 :(得分：5)
使用Bootstrap＆gt; = 3.0源文件（SASS或LESS）时，如果只有一个，则不必去除所有内容的圆角例如，为了摆脱导航栏上的圆角，请使用：
$navbar-border-radius: 0;
@navbar-border-radius: 0;
但是，如果你想要摆脱一切的圆角，你可以做@ adamwong246提到并使用的内容：
$baseBorderRadius: 0;
@baseBorderRadius: 0;
这两个设置是＆＃34; root＆＃34;除非指定了其他值，否则其他设置（如navbar-border-radius）将继承的设置。
对于列表，所有变量都会检出variables.less或variables.scss
答案 7 :(得分：5)
这个问题相当陈旧，但即使在 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
答案 8 :(得分：5)
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>
答案 9 :(得分：4)
@BrunoS上面发布的代码对我不起作用，
* {
.border-radius(0) !important;
}
我用过的是
* {
border-radius: 0 !important;
}
我希望这有助于某人
答案 10 :(得分：4)
有一种非常简单的方法来自定义Bootstrap：
答案 11 :(得分：2)
或者您可以将此添加到要删除边框半径的元素的html中（这样您就不会将其从所有按钮/元素中删除）：
style="border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;"
答案 12 :(得分：2)
如果您使用的是引导程序，则只需使用bootstrap class =“ rounded-0”即可使边框具有不带圆角的尖锐边缘
<button class="btn btn-info rounded-0"">Generate</button></span>
答案 13 :(得分：1)
您可能还想查看FlatStrap。它为Bootstrap CSS提供了Metro-Style替代品，没有圆角，渐变和阴影。
答案 14 :(得分：0)
我创建了另一个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;
}
答案 15 :(得分：0)
使用SASS Bootstrap-如果您自己编译Bootstrap，则可以将所有边界半径（或更具体的边界半径）简单地设置为零：
$border-radius: 0;
$border-radius-lg: 0;
$border-radius-sm: 0;