CSS 使用 SASS for Ruby on Rails 时，如何使用 border-radius 属性删除导航栏圆角？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20941607/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove navbar rounded corners using border-radius property when using SASS for Ruby on Rails?
提问by Faique Moqeet
I am new to programming and learning bootstrap through a course called One Month Rails. I want to remove the rounded corners on the inverse-navbar but am having a hard time. I have looked through both of the stackoverflow threads in the links below but still am having trouble.
我是通过名为 One Month Rails 的课程进行编程和学习引导程序的新手。我想删除反向导航栏上的圆角，但很难。我查看了以下链接中的两个 stackoverflow 线程，但仍然遇到问题。
Currently I have a file called "Bootstrap_and_customization.css.scss" and it has the following code:
目前我有一个名为“Bootstrap_and_customization.css.scss”的文件，它有以下代码：
$body-bg: #95a5a6;
$border-radius: 0px;
@import 'bootstrap';
However, the border radius is still rounded. I hope I've provided enough information but I might not have so please let me know.
但是，边界半径仍然是圆角的。我希望我提供了足够的信息，但我可能没有，所以请告诉我。
Thanks
谢谢
===== Links:
====== 链接：
Getting rid of all the rounded corners in Twitter Bootstrap
https://stackoverflow.com/questions/20926522/flat-ui-round-corners-css-html
https://stackoverflow.com/questions/20926522/flat-ui-round-corners-css-html
回答by Manza
I will instead of modifying the css add the class: navbar-static-top
我将而不是修改 css 添加类：navbar-static-top
ie:
IE：
<nav class="navbar navbar-default navbar-static-top" role="navigation">
or the class navbar-fixed-top, if you want the menu to be fixed on the top(on large pages)
或类 navbar-fixed-top，如果您希望菜单固定在顶部（在大页面上）
ie:
IE：
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
回答by Haroon Patel - PK
You used:
你用过：
<nav class="navbar navbar-inverse">
Try using this instead:
尝试改用这个：
<nav class="navbar navbar-inverse navbar-static-top">
and this will remove radius
这将删除半径
回答by Vidya
All you have done there is create a variable initialized to 0. I think you are best off letting Bootstrap do what it wants and then overriding what you want.
你所做的就是创建一个初始化为 0 的变量。我认为你最好让 Bootstrap 做它想做的事，然后覆盖你想要的。
Try applying
尝试申请
* {
border-radius: 0 !important;
-moz-border-radius: 0 !important;
}
And of course make sure this style (and any other overriding styles) is included in your template files.
当然，请确保此样式（以及任何其他覆盖样式）包含在您的模板文件中。
回答by Theo Leinad
On your class navbar you need to override the border-radius to 0px:
在您的类导航栏上，您需要将 border-radius 覆盖为 0px：
<nav class="navbar navbar-inverse" style="border-radius:0px;">
Since the html has priority over the CSS you'll be overriding the style without messing with the code.
由于 html 优先于 CSS，因此您将覆盖样式而不会弄乱代码。
In the other hand you could override all the "border-radius" that precede "navbar" in the "css/bootstrap.css"
另一方面，您可以覆盖“css/bootstrap.css”中“navbar”之前的所有“border-radius”
Note:for border color I used: "border-color:transparent;"
注意：对于我使用的边框颜色：“border-color:transparent;”
回答by krekto
Hope this helps you.This worked for me.
希望这对你有帮助。这对我有用。
<nav class="navbar navbar-inverse navbar-static-top" >
<!-- Content -->
</nav>
回答by Yordan Ramchev
Just add class .navbar-fulllike this.
只需像这样添加类.navbar-full。
<nav class="navbar navbar-dark bg-inverse navbar-full" id="nav-main">
I dont know if this work for bootstrap 3, but you can give it a try.
我不知道这是否适用于引导程序 3，但您可以尝试一下。
回答by Bmuzammil
.navbar{
border-radius:0 !important;
}
apply the style directly on the same element that contains navbar. !important will remove the style from bootstrap and make your stype more important.
将样式直接应用到包含导航栏的同一元素上。!important 将从引导程序中删除样式并使您的 stype 更重要。
回答by Ian Warner
This is also a variable that can be built and downloaded or changed if you use LESS / SCSS
如果您使用 LESS / SCSS，这也是一个可以构建和下载或更改的变量
$navbar-border-radius: $border-radius-base !default;
回答by Tom Hagen
This linkhas a similar question and was answered perfectly.
这个链接有一个类似的问题，并得到了完美的回答。
Bootstrap CSS can be huge and compressed. You can do 'inspect element' to find the location of the file in which the CSS property is present, then modify the parameters over there.
Bootstrap CSS 可以是巨大的和压缩的。您可以执行“检查元素”以找到存在 CSS 属性的文件的位置，然后在那里修改参数。
OR
或者
You can write some internal CSS, i.e in the view file or application layout(If you want for all views).
您可以编写一些内部 CSS，即在视图文件或应用程序布局中（如果您想要所有视图）。
In the head of the respective file write the following:
在相应文件的头部写入以下内容：
<style>
body {
background-color: #95a5a6;
border-radius: 0px;
}
</style>
If the above code does not work then you will have to specify the class of the div or element for which you want to have angle borders. In the head of the respective file write the following:
如果上面的代码不起作用，那么您必须指定要为其设置角度边框的 div 或元素的类。在相应文件的头部写入以下内容：
<style>
.class {
background-color: #95a5a6;
border-radius: 0px;
}
</style>
Note: Replace 'class' with a valid one.
注意：将“类”替换为有效的类。
回答by Pablo
You should change the following bootstrap block:
您应该更改以下引导程序块：
@media (min-width: 768px) {
.navbar {
border-radius: 4px;
}
}
Just comment the border-radius property.
只需注释 border-radius 属性。
