去掉 Bootstrap 里所有的圆角

我喜欢 Bootstrap 2.0-我喜欢它是如此完整的一个库... 但是我想为一个非常方形的非圆形站点做一个全局修改，这是为了摆脱 Bootstrap 中所有的圆角..。

有很多 CSS 要查。是否有一个全球开关，或者什么是最好的方式来找到和替换所有的圆形？

213132 次浏览
小开

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

小开

如果您想避免重新编译所有的东西，只需将 .btn {border-radius: 0;}添加到您的 CSS。

小开 
.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
}
小开
最佳答案

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

* {
border-radius: 0 !important;
}

因为我确定我不想以后覆盖这个，我只是使用。

如果你没有编译较少的文件，那就这样做:

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

在 bootstrap 3中，如果你正在编译它，你现在可以在 variable.less 文件中设置半径:

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

在引导程序4中，如果你正在编译它，你可以在 _custom.scss文件中禁用所有的半径:

$enable-rounded:   false;
小开

如果您正在使用 Bootstrap version < 3..。

用 sass/scss

$baseBorderRadius: 0;

用更少的钱

@baseBorderRadius: 0;

您需要设置导入引导程序的变量 之前。这将影响所有的 well 和导航条。

更新

如果您正在使用引导程序3 基地边界半径应该是 边界-半径-基准

小开

您可能还想看看 平带。它提供了一个地铁样式的替代引导 CSS 没有圆角，渐变和下降阴影。

小开

或者你可以把它添加到你想移除边框半径的元素的 html 中(这样你就不会从所有的按钮/元素中移除它) :

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

当使用 Bootstrap > = 3.0源文件(SASS或 LESS)时，如果只有一个元素让你烦恼，你不必去掉所有元素的圆角，例如，去掉导航栏上的圆角，使用:

有关 SCSS:

$navbar-border-radius: 0;

用更少的:

@navbar-border-radius: 0;

然而，如果你确实想摆脱所有东西的圆角，你可以按照@adamwong246提到的那样使用:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

这两个设置是“根”设置，除非指定其他值，否则其他设置(如 navbar-border-radius)将从这些设置继承。

对于一个列表，所有的变量检查 变量更少或 变量

小开

上面@Brunos 发布的代码对我不起作用,

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

我用的是

* {
border-radius: 0 !important;
}

我希望这能帮到别人

小开 
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:

  1. 调到 http://getbootstrap.com/customize/
  2. 找到所有的“半径”，并修改他们如你所愿。
  3. 点击“编译和下载”，享受你自己版本的 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
小开

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

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

小开

如果你正在使用 bootstrap，你可以使用 bootstrap 类 = “ round-0”来制作没有圆角的尖锐边框 <button class="btn btn-info rounded-0"">Generate</button></span>


提交答案