Bootstrap Navbar — граница вокруг элементов меню

Меню

Я пытаюсь применить границу вокруг элементов меню на панели навигации в начальной загрузке, но, похоже, это не работает в соответствии с решением, предоставленным в другом месте.

Я следую своему custom.css, который не работает.

.navbar-default { border-color: #662D91; }

Я пробовал другой способ сделать это, следуя коду, но у него есть проблемы с переходом в меню.

ul.nav a:hover {
    color: #662D91;
    background-color: #ffffff;
    border: 2px solid #662D91;
}

.navbar-nav li.active > a {
    background-color: #ffffff;
    border: 2px solid #662D91;
}

Как нам добавить рамку вокруг пунктов меню самым простым способом?

Ниже приведен html и пользовательский CSS, который дает мне границу, но меню прыгает при наведении на него.

HTML

<ul id="w1" class="navbar-nav navbar-right nav">
    <li><a href="/yii/web/site/index">Home</a></li>
    <li class="active"><a href="/yii/web/site/about">About</a></li>
    <li><a href="/pdd_yii/web/site/contact">Contact</a></li>
    <li><a href="/pdd_yii/web/site/login">Login</a></li>
</ul>

Пользовательские CSS

a {
    color: #662D91;
    text-decoration: none;
}

ul.nav a:hover {
    color: #662D91;
    background-color: #ffffff;
    border: 2px solid #662D91;
}

.navbar-nav li.active > a {
    background-color: #ffffff;
    border: 2px solid #662D91;
}

css twitter-bootstrap twitter-bootstrap-3
person DaveMS    schedule 12.07.2019    source источник
comment
Вы загружаете свой custom.css после bootstrap.css? Стили переопределяются или вообще не применяются?   -  person iamdlm    schedule 12.07.2019
comment
Я загружаю custom.css после bootstrap.css. Я вижу, что изменения custom.css применяются к другим элементам, поэтому это не проблема с порядком включения css.   -  person DaveMS    schedule 12.07.2019
comment
Поделитесь своим html для меню и пользовательским css, влияющим на него.   -  person iamdlm    schedule 12.07.2019
comment
Добавлены html и css. С этим кодом я получаю границу, но меню прыгает, когда вы наводите на нее курсор.   -  person DaveMS    schedule 12.07.2019
comment
Что вы имеете в виду под прыжком? Вы хотите, чтобы граница каждый раз или только когда активно?   -  person iamdlm    schedule 12.07.2019
comment
Оба. Когда вы наводите курсор, это должна быть граница, а когда она активна, она должна быть границей. Я делаю это неправильно?   -  person DaveMS    schedule 12.07.2019
comment
Нет, но тогда я не вижу в чем проблема.   -  person iamdlm    schedule 12.07.2019
comment
попробуйте применить его на .navbar nav li. это показывает, когда вы наводите курсор или нажимаете на a?   -  person jmag    schedule 12.07.2019
comment
Я добавил gif, который показывает проблему.   -  person DaveMS    schedule 12.07.2019
comment
@DaveMS Я вижу это. Как я и подозревал. граница применяется к hover и active, но не к самому li (элементу списка).   -  person jmag    schedule 12.07.2019
comment
@jmag так как это исправить?   -  person DaveMS    schedule 12.07.2019
comment
@DaveMS Я проверяю элемент, который мне нужно изменить, чтобы убедиться, что я получил правильный селектор. Что вам нужно, так это удалить .active из li.active. В качестве альтернативы вы хотите изменить цвет фона на .active для более драматического эффекта.   -  person jmag    schedule 12.07.2019
comment
.navbar-nav li {цвет фона: #ffffff; граница: 2px сплошная #662D91; }   -  person jmag    schedule 12.07.2019
comment
Это применит границу ко всему элементу списка   -  person jmag    schedule 12.07.2019
comment
ТС, у меня получилось.   -  person DaveMS    schedule 12.07.2019

Ответы (1)


arrow_upward
0
arrow_downward

Это применит границы к элементам списка.

.navbar-nav li {
background-color: #ffffff;
border: 2px solid #662D91;
}

Это изменит цвет для наведения и активного состояния.

ul.nav a:hover,.navbar-nav li.active > a{
color: #fff;
background-color: #662D91;
border: 2px solid #fff;
}
person jmag    schedule 12.07.2019