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

Posted 2023-03-06

【中文标题】使用SASS for Ruby on Rails时如何使用border-radius属性删除导航栏圆角？

【英文标题】：How to remove navbar rounded corners using border-radius property when using SASS for Ruby on Rails?

【发布时间】：2014-01-23 08:43:24

【问题描述】：

我是通过一门名为 One Month Rails 的课程来编程和学习引导程序的新手。我想删除反向导航栏上的圆角，但很难。我已经查看了下面链接中的两个 *** 线程，但仍然遇到问题。

目前我有一个名为“Bootstrap_and_customization.css.scss”的文件，它有以下代码：

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

但是，边框半径仍然是圆形的。我希望我已经提供了足够的信息，但我可能没有，所以请告诉我。

谢谢

===== 链接：

Getting rid of all the rounded corners in Twitter Bootstrap

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

【参考方案1】：

.navbar
border-radius:0 !important;

将样式直接应用于包含导航栏的同一元素。 !important 将从引导程序中删除样式并使您的 stype 更重要。

【参考方案2】：

希望这对你有帮助。这对我有用。

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

<!-- Content -->

</nav>

【参考方案3】：

只需像这样添加类.navbar-full。

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

我不知道这是否适用于 bootstrap 3，但您可以尝试一下。

【参考方案4】：

这也是一个变量，如果你使用 LESS / SCSS 可以构建和下载或更改

$navbar-border-radius: $border-radius-base !default;

【参考方案5】：

你用过：

<nav class="navbar navbar-inverse">

尝试改用这个：

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

这将删除半径

【讨论】：

【参考方案6】：

<style>
.navbar
border-radius:0px;

</style>

在标签之前或之后提供这些代码，以便覆盖默认属性。希望这对您有所帮助。这对我有用。

【参考方案7】：

寻找.navbar-inverse 并且只添加border-radius:0px; 像这样 .navbar-inverse border-radius:0px;

【参考方案8】：

在您的类导航栏上，您需要将边框半径覆盖为 0px：

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

由于 html 优先于 CSS，您将覆盖样式而不会弄乱代码。

另一方面，您可以覆盖前面的所有“边界半径” “css/bootstrap.css”中的“导航栏”

注意：我使用的边框颜色：“border-color:transparent;”

【参考方案9】：

我不会修改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">

【讨论】：

这几乎成功了，但我的导航栏右 ul 没有正确定位（文本与页面的右边缘齐平）。其他一切看起来都不错。

为什么导航中有role="navigation"？

嗨，Michael，这是我在新的引导文档中发现的，希望对您有所帮助：为每个导航栏添加一个 role="navigation" 以明确将其标识为辅助技术用户的标志性区域

我搜索了这个，来到这里，它奏效了。一年后：我搜索了这个，来到这里，它奏效了。谢谢你，谢谢你。 :)

【参考方案10】：

您应该更改以下引导程序块：

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

只需注释border-radius 属性即可。

【参考方案11】：

这个link有一个类似的问题，得到了完美的回答。

Bootstrap CSS 可以很大并且可以压缩。您可以执行“检查元素”来查找存在 CSS 属性的文件的位置，然后修改那里的参数。

或

您可以编写一些内部 CSS，即在视图文件或应用程序布局中（如果您想要所有视图）。

在相应文件的头部写入以下内容：

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

</style>

如果上面的代码不起作用，那么您必须指定要为其设置角度边框的 div 或元素的类。 在相应文件的头部写入以下内容：

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

</style>

注意：将“class”替换为有效的。

【参考方案12】：

你所做的只是创建一个初始化为 0 的变量。我认为你最好让 Bootstrap 做它想做的事情，然后覆盖你想要的东西。

尝试申请

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

当然还要确保此样式（以及任何其他覆盖样式）包含在您的模板文件中。

【讨论】：

可能也想考虑 webkit：-webkit-border-radius: 0 !important;