2013-09-22 4 views
2

enter image description hereНеожиданное тонкая линия под Bootstrap navtabs в Firefox

Bootstrap3. Очень странная тонкая линия под вкладкой. Но не все вкладки, вкладка «Настройки» в порядке, без линии внизу.

Он показывает только строку в firefox. Другой браузер в порядке.

У кого-то есть такая же проблема, как у меня?

<ul class="nav nav-tabs"> 
    <li class="active"><a href="my_account.php"> Profile</a></li> 
    <li><a href="my_account_settings.php"><i class="glyphicon glyphicon-cog"></i> Settings</a></li> 
    <li><a href="my_account_credits.php"> Credits</a></li> 
</ul> 

ответ

1

СЧА закладок будет иметь границу с:

.nav-tabs { 
    border-bottom: 1px solid #DDDDDD; 
} 

Для активной вкладки этой границы (внизу) будет скрыт:

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { 
{ 
    border-color: #DDDDDD #DDDDDD transparent; 
} 

При изменении этого CSS кода, установите границу .nav-tabs на 2px, активная нижняя граница больше не будет скрыта.

обновление

на основе кода (завернутый в .container дел) является увидеть это в FF EN Chrome:

enter image description here

линии на вкладке профиль в изображение не так, как ожидалось. Попробуйте использовать свой код только с помощью CSS-кода Bootstrap. Ваш пользовательский css изменит цвет рамки (из .nav-tabs> li.active> и т. Д.), Может быть?

+0

Спасибо вам за понимание. Я понимаю. «Прозрачный», похоже, не работает на моих активных вкладках, кроме второй вкладки «Настройки». Очень странно. Я просмотрел эти правила CSS, и они там. – Hao

0

У меня также есть эта проблема и я не могу определить, что не так с css, хотя у меня есть это на хроме. Я заметил, что это происходит только в том случае, если в заголовке вкладки есть значок или img. Вы видите это, если удалить значок в заголовке вкладки настроек? Попробуйте удалить это.

+0

У меня есть один глификон на одной вкладке. Моя проблема исчезла, но я не знаю, как я ее исправлю. Только позднее две вкладки начинают использовать HTTPS для входа. Я не знаю, связано ли это с проблемой. Или, может быть, я переупорядочил файлы javascript/jquery. Их порядок иногда прикручивает. – Hao

0

У меня была та же проблема и она была решена. Причина линии была то, что я добавил значки в нав:

<span class="badge">xx</span> 

Чтобы снять тонкую линию, я только что добавил класс «втягивание права» значки и она работала:

<span class="badge pull-right">xx</a> 
Смежные вопросы