180

私はTwitterBootstrap2.0が大好きです-このような完全なライブラリが大好きです...しかし、Bootstrapの丸みを帯びた角をすべて取り除くために、非常に箱型ではないサイトをグローバルに変更したいと思います...

それはたくさんのCSSを通り抜ける必要があります。グローバルスイッチはありますか、それともすべての丸みを見つけて置き換えるための最良の方法は何でしょうか？

4

16 に答える 16

346

次のように、すべての要素の境界半径を「0」に設定します。

* {
  border-radius: 0 !important;
}

後でこれを上書きしたくないと確信しているので、！importantを使用します。

少ないファイルをコンパイルしていない場合は、次のようにしてください。

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

ブートストラップ3でコンパイルしている場合は、variables.lessファイルで半径を設定できるようになりました。

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

ブートストラップ4では、コンパイルする場合、_custom.scssファイルでradiusをすべて無効にすることができます。

$enable-rounded:   false;
于 2013-03-07T15:45:40.547 に答える
25

.lessソースファイルをダウンロードし、.border-radius()ミックスインを空白にします。

于 2012-03-16T17:57:32.243 に答える
21

Bootstrapバージョン<3を使用している場合...

sass/scss付き

$baseBorderRadius: 0;

より少ないで

@baseBorderRadius: 0;

ブートストラップをインポートする前に、この変数を設定する必要があります。これはすべてのウェルとナビバーに影響します。

アップデート

Bootstrap 3を使用している場合、baseBorderRadiusはborder-radius-baseである必要があります

于 2013-03-13T16:56:34.963 に答える
18

すべてを再コンパイルすることを避けたい場合は.btn {border-radius: 0;}、CSSに追加するだけです。

于 2012-10-20T17:41:40.157 に答える
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;
}
于 2015-09-05T16:33:33.870 に答える
8

この質問はかなり古いものですが、Bootstrap4関連の検索でも検索エンジンで非常に目立ちます。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なっています。

_custom.scssSassと私のような（または公式のカスタマイザーを使用して）Bootstrap 4をコンパイルする場合は、関連する変数をオーバーライドするだけで十分です。

$enable-rounded : false
于 2016-09-27T18:42:54.747 に答える
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>

于 2020-03-06T08:55:28.187 に答える
5 
.btn {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

または、ミックスインを定義して、丸みのないボタンが必要な場所に含めます。

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

.btn.btn_1 {
@inlude btn-round-none
}
于 2012-12-09T16:14:37.883 に答える
5

Bootstrap> =3.0ソースファイル（SASSまたはLESS）を使用する場合、たとえば、ナビゲーションバーの丸みを帯びた角を取り除くために、バグを引き起こしている要素が1つしかない場合は、すべての丸みを帯びた角を取り除く必要はありません。使用する：

SCSSの場合：

$navbar-border-radius: 0;

少ない場合：

@navbar-border-radius: 0;

ただし、すべての丸みを帯びた角を取り除きたい場合は、@adamwong246が述べたことを実行して使用できます。

$baseBorderRadius: 0;
@baseBorderRadius: 0;

これらの2つの設定は、他の値が指定されていない限り、のような他の設定navbar-border-radiusが継承する「ルート」設定です。

リストについては、すべての変数がvariables.lessまたはvariables.scssをチェックしてください。

于 2014-05-29T16:13:16.090 に答える
4

@BrunoSによって上記に投稿されたコードは、私には機能しませんでした。

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

私が使ったのは

* {
  border-radius: 0 !important;
}

これが誰かに役立つことを願っています

于 2014-12-03T13:03:42.457 に答える
4

Bootstrapをカスタマイズする非常に簡単な方法があります。

  1. http://getbootstrap.com/customize/にアクセスするだけです
  2. すべての「半径」を見つけて、必要に応じて変更します。
  3. 「コンパイルしてダウンロード」をクリックして、独自のバージョンのBootstrapをお楽しみください。
于 2015-09-15T22:52:29.450 に答える
4

SASS Bootstrapを使用すると（Bootstrapを自分でコンパイルする場合）、すべての境界線の半径（またはより具体的に）を単純にゼロに設定できます。

$border-radius:               0;
$border-radius-lg:            0;
$border-radius-sm:            0;
于 2019-10-02T14:02:31.207 に答える
3

ブートストラップを使用している場合は、ブートストラップclass = "rounded-0"を使用して、角が丸くない鋭いエッジで境界線を作成できます。 <button class="btn btn-info rounded-0"">Generate</button></span>

于 2020-05-10T17:31:57.493 に答える
2

または、境界線の半径を削除する要素のhtmlにこれを追加することもできます（この方法では、すべてのボタン/要素から削除するわけではありません）。

style="border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;"
于 2014-04-25T20:13:09.520 に答える
1

FlatStrapもご覧ください。丸みを帯びた角、グラデーション、ドロップシャドウのないBootstrapCSSのMetroスタイルの代替品を提供します。

于 2013-08-04T10:18:19.947 に答える
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;
}
于 2017-09-05T19:08:10.710 に答える