Как подчеркнуть ссылки в навигационной панели с помощью Bootstrap 3?

Я пытаюсь применить пользовательский стиль CSS к панели навигации Bootstrap, так что текст ссылки подчеркивается при наведении указателя мыши. Я также, как подчеркивание исчезать вКак подчеркнуть ссылки в навигационной панели с помощью Bootstrap 3?

Вот то, что я до сих пор:. https://jsfiddle.net/xfddh0r5/

.navbar-default { 
    background-color: #fff; 
} 
.navbar-default .navbar-nav > li { 
    background-color: #fff; 
} 
.navbar-default .navbar-nav > li > a { 
    color: #333; 
    border-bottom: 1px solid transparent; 
} 
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { 
    background-color: #fff; 
    color: #439348; 
    border-bottom: 1px solid #439348; 
}

Я заметил две странные проблемы:

Подчеркивание появляется на внизу навигационной панели, а не непосредственно под текстом.
Ссылка «область» для пунктов меню кажется слишком большой. В идеале просто текст будет ссылкой.

Может ли кто-нибудь сказать мне, почему это происходит?

Большое спасибо!

источник

2015-03-22 James

Вы можете сбросить padding на 0 или уменьшить значения. И используйте margin, чтобы отрегулировать интервал снова.

.navbar-default .navbar-nav > li > a { 
    color: #333; 
    border-bottom: 1px solid transparent; 
    padding: 0; /*removing spacing*/ 
    margin: 14px; /*add spacing*/ 
}

источник

2015-03-22 19:06:08 Stickers

Спасибо - это не совсем, кажется, работает, подчеркивание все еще слишком велико. Кроме того, пустое пространство над текстом кажется частью ссылки. – James

обновил ответ, вы можете оставить все отступы до 0, если хотите. – Stickers

Извините, я довольно новичок в CSS. Ссылки меню затем получают все в порядке в верхнем правом углу. Возможно, мне нужно изменить прописку на элементе [li]? Благодаря! – James

У ссылок есть много отступов, чтобы их легко было нажимать. Если вы хотите применить границу к тексту, вы можете поместить текст внутри диапазона и применить к нему стиль.

HTML:

<ul class="nav navbar-nav navbar-right"> 
    <li class="active"><a href="#"><span>Home</span></a></li> 
    <li><a href="#"><span>Item 1</span></a></li> 
    <li><a href="#"><span>Item 2</span></a></li> 
</ul>

CSS:

.navbar-default .navbar-nav > li > a > span { 
    border-bottom: 1px solid transparent; 
}

Вы можете выполнить увядает с помощью CSS переходы:

.navbar-default .navbar-nav > li > a:hover > span { 
    border-bottom-color: #439348; 
    transition: border 1s linear; 
}

источник

2015-03-22 19:26:25

Как подчеркнуть ссылки в навигационной панели с помощью Bootstrap 3?

ответ

Смежные вопросы