Как удалить закругленные углы Navbar с использованием свойства border-radius при использовании SASS для Ruby on Rails?

Я новичок в программировании и обучении бутстрапа через курс под названием One Month Rails. Я хочу удалить закругленные углы на инверсном навигаторе, но мне тяжело. Я просмотрел потоки stackoverflow в ссылках ниже, но все еще имею проблемы.

В настоящее время у меня есть файл под названием "Bootstrap_and_customization.css.scss" и он имеет следующий код:

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

Однако радиус границы все еще округлен. Надеюсь, что я предоставил достаточно информации, но, возможно, я так не хочу, дайте мне знать.

Спасибо

===== Ссылки:

Избавьтесь от всех закругленных углов в Twitter Bootstrap

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

Ответ 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">

Ответ 2

Вы использовали:

<nav class="navbar navbar-inverse">

Попробуйте использовать это вместо:

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

и это приведет к удалению радиуса

Ответ 3

Все, что вы сделали, это создать переменную, инициализированную значением 0. Я думаю, вам лучше всего позволить Bootstrap делать то, что он хочет, а затем переопределять то, что вы хотите.

Попробуйте применить

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

И, конечно же, убедитесь, что этот стиль (и любые другие переопределяющие стили) включены в ваши файлы шаблонов.

Ответ 4

В вашем классе navbar вам необходимо переопределить радиус границы до 0px:

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

Так как html имеет приоритет над CSS, вы будете переопределять стиль, не вникая в код.

С другой стороны, вы можете переопределить весь "радиус границы", который предшествует "navbar" в "css/bootstrap.css"

Примечание: для цвета границы Я использовал: border-color: transparent;

Ответ 5

Просто добавьте класс .navbar-full, как это.

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

Я не знаю, работает ли это для загрузки 3, но вы можете попробовать.

Ответ 6

Эта ссылка имеет аналогичный вопрос и ответила отлично.

Bootstrap CSS может быть огромным и сжатым. Вы можете "проверять элемент", чтобы найти местоположение файла, в котором присутствует свойство CSS, а затем изменить параметры там.

ИЛИ

Вы можете написать некоторый внутренний CSS, т.е. в файле представления или макете приложения (если вы хотите для всех представлений).

В заголовке соответствующего файла напишите следующее:

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

Если приведенный выше код не работает, вам нужно будет указать класс div или элемент, для которого вы хотите иметь угловые границы. В главном файле напишите следующее:

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

Примечание. Замените "класс" на допустимый.

Ответ 7

Вы должны изменить следующий блок начальной загрузки:

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

Просто прокомментируйте свойство border-radius.

Ответ 8

Это также переменная, которая может быть построена и загружена или изменена, если вы используете LESS/SCSS

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

Ответ 9

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

Предоставьте эти коды до или после тегов, чтобы это переопределило свойство по умолчанию. Надеюсь, это поможет вам. Это помогло мне.

Ответ 10

найдите .navbar-inverse и добавьте {border-radius:0px;}, как это .navbar-inverse {border-radius:0px;}

Ответ 11

Надеюсь, это поможет вам. Это помогло мне.

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

<!-- Content -->

</nav>

Ответ 12

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

применить стиль непосредственно к тому же элементу, который содержит navbar.! important удалит стиль из бутстрапа и сделает ваш стиль более важным.