CSS 摆脱 Twitter Bootstrap 中的所有圆角

Getting rid of all the rounded corners in Twitter Bootstrap

提问by ina

I love Twitter Bootstrap 2.0 - I love how it's such a complete library... but I want to make a global modification for a very boxy-not-round site, which is to get rid of all the rounded corners in Bootstrap...

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

That's a lot of CSS to chug through. Is there a global switch, or what would be the best way to find and replace all the rounded's?

这需要大量的 CSS 来完成。是否有全局开关，或者查找和替换所有四舍五入的最佳方法是什么？

回答by BrunoS

I set all element's border-radius to "0" like this:

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

* {
  border-radius: 0 !important;
}

As I'm sure I don't want to overwrite this later I just use !important.

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

If you are not compiling your less files just do:

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

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

In bootstrap 3 if you are compiling it you can now set radius in the variables.less file:

在引导程序 3 中，如果您正在编译它，您现在可以在 variables.less 文件中设置半径：

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

In bootstrap 4 if you are compiling it you can disable radius alltogether in the _custom.scssfile:

在引导程序 4 中，如果您正在编译它，您可以在_custom.scss文件中完全禁用半径：

$enable-rounded:   false;

回答by SLaks

Download the source .lessfiles and make the .border-radius()mixin blank.

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

回答by adamwong246

If you are using Bootstrap version < 3...

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

With sass/scss

使用 sass/scss

$baseBorderRadius: 0;

With less

用更少

@baseBorderRadius: 0;

You will need to set this variable beforeimporting the bootstrap. This will affect all wells and navbars.

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

Update

更新

If you are using Bootstrap 3 baseBorderRadiusshould be border-radius-base

如果你使用 Bootstrap 3 baseBorderRadius应该是border-radius-base

回答by yves amsellem

If you want to avoid recompiling the all thing, just add .btn {border-radius: 0;}to your CSS.

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

回答by ymakux

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

回答by edigu

This question is pretty old however it is highly visible on search engines even in Bootstrap 4related searches. I think it worths to add an answer for disabling the rounded corners, BS4 way.

这个问题已经很老了，但是即使在Bootstrap 4相关搜索中，它在搜索引擎上也很明显。我认为值得添加一个禁用圆角的答案，BS4 方式。

In the _variables.scssthere are several global modifiers exists to quickly change the stuff such as enabling or disabling flex gird system, rounded corners, gradients etc. :

在_variables.scss有几个全球改性剂的存在是为了迅速改变的东西，如启用或禁用柔性网格系统，圆角，渐变等：

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

Rounded corners are enabledby default.

enabled默认情况下是圆角。

If you prefer compiling the Bootstrap 4 using Sass and your very own _custom.scsslike me (or using official customizer), overriding the related variable is enough:

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

$enable-rounded : false

回答by tomruss

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

Or define a mixin and include it wherever you want an unrounded button.

或者定义一个 mixin 并将它包含在你想要一个不圆角按钮的任何地方。

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

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

回答by cwd

When using Bootstrap >= 3.0source files (SASSor LESS) you don't have to get rid of the rounded corners on everything if there is just one element that is bugging you, for example, to just get rid of the rounded corners on the navbar, use:

使用 Bootstrap >=3.0源文件（SASS或LESS）时，如果只有一个元素困扰着您，则不必去除所有内容上的圆角，例如，只需去除导航栏上的圆角，用：

With SCSS:

使用 SCSS：

$navbar-border-radius: 0;

With LESS:

少：

@navbar-border-radius: 0;

However, if you do want to get rid of the rounded corners on everything, you can do what @adamwong246 mentioned and use:

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

$baseBorderRadius: 0;
@baseBorderRadius: 0;

Those two settings are the "root" settings from which the other settings like navbar-border-radiuswill inherit from unless other values are specified.

这两个设置是“根”设置navbar-border-radius，除非指定了其他值，否则其他设置将继承自该设置。

For a list all variables check out the variables.lessor variables.scss

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

回答by Smith

The code posted above by @BrunoS did not work for me,

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

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

what i used was

我用的是

* {
  border-radius: 0 !important;
}

I hope this helps someone

我希望这可以帮助别人

回答by Zbigniew Ledwoń

There is a very easy way to customize Bootstrap:

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

1. Just go to http://getbootstrap.com/customize/
2. Find all "radius" and modify them as you wish.
3. Click "Compile and Download" and enjoy your own version of Bootstrap.

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