如何在使用SASS for Ruby on Rails时使用border-radius属性删除导航栏圆角？

Question

我是一个名为One Month Rails的课程的新编程和学习bootstrap.我想删除反向导航栏上的圆角,但我很难过.我已查看下面链接中的两个stackoverflow线程但仍然遇到问题.

目前我有一个名为"Bootstrap_and_customization.css.scss"的文件,它有以下代码:

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

但是,边框半径仍然是圆形的.我希望我提供了足够的信息,但我可能没有,请告诉我.

谢谢

=====链接:

Answer 1

我将代替修改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">

Answer 2

你用过:

<nav class="navbar navbar-inverse">

请尝试使用此代码:

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

这将删除半径

Answer 3

你所做的就是创建一个初始化为0的变量.我认为你最好让Bootstrap做你想做的事,然后覆盖你想要的东西.

尝试申请

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

当然,请确保您的模板文件中包含此样式(以及任何其他重写样式).

Answer 4

在类导航栏上,您需要将border-radius覆盖为0px:

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

由于html优先于CSS,因此您将覆盖该样式而不会弄乱代码.

另一方面,您可以覆盖"css/bootstrap.css"中"navbar"之前的所有"border-radius"

注意:对于我使用的边框颜色:"border-color:transparent;"

Answer 5

希望这对你有所帮助.这对我有用.

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

<!-- Content -->

</nav>