Bootstrap header navbar height пункты меню

Я прихожу к вам, потому что я вытаскиваю свои волосы из головы из-за проблем с дизайном с помощью бутстрапа navbars.Bootstrap header navbar height пункты меню

Я сделал фиксированный верхний навигатор с разным меню, один справа и один слева. Мой CSS-код превращает фон моих ссылок в серый, когда пользователь наводил их на них. Но я замечаю, что мои пункты меню не имеют одинаковой высоты, поэтому, когда мой указатель наводит на себя меньший элемент, новый цвет не заполняет всю высоту панели заголовка. Это несколько скриншотов, чтобы помочь вам:

enter image description here

И есть код моего заголовка панели:

<div class="container-fluid header-bar"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="index.html">Admin Page</a> 
    </div> 
    <!-- /.navbar-header --> 
    <ul class="nav navbar-nav navbar-left"> 
    <li> 
     <a href class=" profile_image" > 
     <img src="../../../images/user.png" class="img-circle" alt="profile-pic"> {{vm.account.name}} 
     </a> 
    </li> 
    </ul> 
    <ul class="nav navbar-nav navbar-right"> 
    <li class="dropdown" uib-dropdown=""> 
     <a href class="dropdown-toggle lang_selector" uib-dropdown-toggle=""> 
     <span class="flag-sm flag-sm-{{vm.defaultLang.flag}}"></span><span class="lang_desc">{{vm.defaultLang.text}}</span> <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu" role="menu" uib-dropdown-menu=""> 
     <li ng-repeat="lang in vm.langs"><a href class="lang_selector" ng-click="vm.defaultLang = lang"><span class="flag-sm flag-sm-{{lang.flag}}"></span><span class="lang_desc">{{lang.text}}</span></a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="" ng-click="vm.logout()"> 
     <md-icon class="li-icon-black material-icons" aria-label="logout">exit_to_app</md-icon> 
     </a> 
    </li> 
    </ul> 
</div>

И есть код CSS:

.smsmode-nav .navbar-header { 
    width: 250px; 
} 
.lang_selector > span { 
    vertical-align: middle; 
    } 
    .lang_desc { 
    margin-left: 8px 
    } 
    .navbar-nav > li > a.profile_image { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
.profile_image > img { 
    width: 30px; 
}

Я знаю, что re - история заполнения, но я стараюсь все, и я не могу это исправить. Я в отчаянии! Так что мне нужна ваша помощь, пожалуйста!

источник

2016-10-24 le_cug

Привет, вы можете также показать нам свой CSS? –

На самом деле, нам нужен ваш css здесь, чтобы быть уверенным. Но мне кажется, что это проблема 'line-height', а не дополнение. Установите везде высоту линии так же, как и высоту бара (или высоту, которую вы хотите), и, вероятно, это проблема. –

Вы можете использовать те же самые значения высоты, высоты и заполнения строки на обеих ссылках. Если это не работает, попробуйте использовать overflow: hidden на них. –

привет удалить этот CSS я надеюсь, что вы получили ваши решения

.lang_selector > span { 
vertical-align: middle; 
    }

источник

2016-10-25 07:11:03

Bootstrap header navbar height пункты меню

ответ

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