Я новичок в программировании и обучении бутстрапа через курс под названием 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
Вместо изменения 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">
Вы использовали:
<nav class="navbar navbar-inverse">
Попробуйте использовать это вместо:
<nav class="navbar navbar-inverse navbar-static-top">
и это приведет к удалению радиуса
Все, что вы сделали, это создать переменную, инициализированную значением 0. Я думаю, вам лучше всего позволить Bootstrap делать то, что он хочет, а затем переопределять то, что вы хотите.
Попробуйте применить
* {
border-radius: 0 !important;
-moz-border-radius: 0 !important;
}
И, конечно же, убедитесь, что этот стиль (и любые другие переопределяющие стили) включены в ваши файлы шаблонов.
В вашем классе navbar вам необходимо переопределить радиус границы до 0px:
<nav class="navbar navbar-inverse" style="border-radius:0px;">
Так как html имеет приоритет над CSS, вы будете переопределять стиль, не вникая в код.
С другой стороны, вы можете переопределить весь "радиус границы", который предшествует "navbar" в "css/bootstrap.css"
Примечание: для цвета границы Я использовал: border-color: transparent;
Просто добавьте класс .navbar-full, как это.
<nav class="navbar navbar-dark bg-inverse navbar-full" id="nav-main">
Я не знаю, работает ли это для загрузки 3, но вы можете попробовать.
Эта ссылка имеет аналогичный вопрос и ответила отлично.
Bootstrap CSS может быть огромным и сжатым. Вы можете "проверять элемент", чтобы найти местоположение файла, в котором присутствует свойство CSS, а затем изменить параметры там.
ИЛИ
Вы можете написать некоторый внутренний CSS, т.е. в файле представления или макете приложения (если вы хотите для всех представлений).
В заголовке соответствующего файла напишите следующее:
<style>
body {
background-color: #95a5a6;
border-radius: 0px;
}
</style>
Если приведенный выше код не работает, вам нужно будет указать класс div или элемент, для которого вы хотите иметь угловые границы. В главном файле напишите следующее:
<style>
.class {
background-color: #95a5a6;
border-radius: 0px;
}
</style>
Примечание. Замените "класс" на допустимый.
Вы должны изменить следующий блок начальной загрузки:
@media (min-width: 768px) {
.navbar {
border-radius: 4px;
}
}
Просто прокомментируйте свойство border-radius.
Это также переменная, которая может быть построена и загружена или изменена, если вы используете LESS/SCSS
$navbar-border-radius: $border-radius-base !default;
<style>
.navbar{
border-radius:0px;
}
</style>
Предоставьте эти коды до или после тегов, чтобы это переопределило свойство по умолчанию. Надеюсь, это поможет вам. Это помогло мне.
найдите .navbar-inverse и добавьте {border-radius:0px;}, как это
.navbar-inverse {border-radius:0px;}
Надеюсь, это поможет вам. Это помогло мне.
<nav class="navbar navbar-inverse navbar-static-top" >
<!-- Content -->
</nav>
.navbar{
border-radius:0 !important;
}
применить стиль непосредственно к тому же элементу, который содержит navbar.! important удалит стиль из бутстрапа и сделает ваш стиль более важным.