web-dev-qa-db-ja.com

Ruby on RailsにSASSを使用する場合、border-radiusプロパティを使用してnavbarの角丸を削除するにはどうすればよいですか？

私はプログラミングと学習が初めてですbootstrap One Month Railsというコースを通して。逆ナビゲーションバーの丸い角を削除したいのですが、苦労しています。両方を調べました。下のリンクのstackoverflowスレッドは、まだ問題を抱えています。

現在、「Bootstrap_and_customization.css.scss」というファイルがあり、次のコードが含まれています。

$body-bg:   #95a5a6;
$border-radius: 0px;
@import 'bootstrap';

ただし、境界線の半径は引き続き丸みを帯びています。十分な情報を提供したことを願っていますが、お持ちでないかもしれませんので、お知らせください。

ありがとう

=====リンク：

Twitter Bootstrapの丸い角をすべて取り除く

https://stackoverflow.com/questions/20926522/flat-ui-round-corners-css-html

cssruby-on-railsrubytwitter-bootstrap
39
Faique Moqeet

Cssを変更する代わりに、クラスを追加します：navbar-static-top

すなわち：

<nav class="navbar navbar-default navbar-static-top" role="navigation">

またはメニューを上部に固定する場合は、クラスnavbar-fixed-top（大きなページ）

すなわち：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
88
Manza

使いました：

<nav class="navbar navbar-inverse">

代わりにこれを使用してみてください：

<nav class="navbar navbar-inverse navbar-static-top">

これは半径を削除します

25
Haroon Patel - PK

そこで行ったのは、0に初期化された変数を作成することだけです。Bootstrapが望んでいることを実行してから、望んでいることをオーバーライドするのが最善だと思います。

適用してみてください

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

そしてもちろん、このスタイル（およびその他のオーバーライドスタイル）がテンプレートファイルに含まれていることを確認してください。

15
Vidya

クラスnavbarでは、border-radiusを0pxにオーバーライドする必要があります。

<nav class="navbar navbar-inverse" style="border-radius:0px;">

HTMLはCSSよりも優先されるため、コードを乱すことなくスタイルをオーバーライドします。

一方、「css/bootstrap.css」の「navbar」に先行するすべての「border-radius」をオーバーライドできます。

注：使用した境界線の色： "border-color：transparent;"

7
Theo Leinad

これがあなたのお役に立てば幸いです。

<nav class="navbar navbar-inverse navbar-static-top" >

<!-- Content -->

</nav>
5
krekto

クラスを追加するだけです。navbar-fullこのように。

<nav class="navbar navbar-dark bg-inverse navbar-full" id="nav-main">

これがbootstrap 3で動作するかどうかはわかりませんが、試してみてください。

4
Yordan Ramchev

これは、LESS/SCSSを使用する場合に構築およびダウンロードまたは変更できる変数でもあります

$navbar-border-radius: $border-radius-base !default;
2
Ian Warner

この link には同様の質問があり、完全に回答されました。

ブートストラップCSSは巨大で圧縮されている場合があります。 「要素の検査」を実行して、CSSプロパティが存在するファイルの場所を見つけ、そこにあるパラメーターを変更できます。

OR

内部CSS、つまりビューファイルまたはアプリケーションレイアウトに書き込むことができます（すべてのビューに必要な場合）。

それぞれのファイルの先頭に次を書きます：

<style>
body {
background-color: #95a5a6;
border-radius: 0px;
}
</style>

上記のコードが機能しない場合は、角度の境界線を設定するdivまたは要素のクラスを指定する必要があります。それぞれのファイルの先頭に次を書きます：

<style>
.class {
background-color: #95a5a6;
border-radius: 0px;
}
</style>

注：「クラス」を有効なものに置き換えてください。

2
Tom Hagen

次のbootstrapブロックを変更する必要があります。

@media (min-width: 768px) {
    .navbar {
         border-radius: 4px;
    } 
}

Border-radiusプロパティにコメントするだけです。

2
Pablo
.navbar{
border-radius:0 !important;
}

navbarを含む同じ要素にスタイルを直接適用します。 ！importantは、bootstrapからスタイルを削除し、stypeをより重要にします。

2
Bmuzammil
<style>
.navbar{
border-radius:0px;
}
</style>

これらのコードをタグの前または後に指定して、デフォルトのプロパティがオーバーライドされるようにします。これが役立つことを願っています。

1
Sreelakshmi

.navbar-inverseを探して、このような{border-radius:0px;}のみを追加します.navbar-inverse {border-radius:0px;}

0
Shahid Hussain