4

Здравствуйте. Подскажите пожалуйста такую вещь. Я создал меню через bootstrap, прописал стили. Но когда я начал уменьшать размер меню, то он стал "съедать буквы". Нужно как-то поднять их. Спасибо.введите сюда описание изображения

.navbar-collapse {
  background: linear-gradient(to top, #4c4e5a 0%, #2c2d33 100%);
  border-radius: 5px;

}
.navbar-nav>li>a {
  color: white;

}

.navbar-nav>li>a:hover {
  color: #FF6600;
  height: 36px
}
.navbar-nav>li {
      border-right: 1px solid gray;
      height: 100%;
}
.nav {
	height:30px;
	font-size: 18px;
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="style.css">
<title>Zont-SPB</title>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
      <div id="logo">
        <a href="index.html">
          <img src="logo1.png" alt="" />
        </a>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
      <div id="contacts">
        <span style="font-size: 16px;" class="glyphicon glyphicon-envelope"></span>E-mail:
        <p>
          <span style="font-size: 16px"; class="glyphicon glyphicon-phone"></span>Телефон:
        </p>
      </div>
    </div>
  </div>
  <div class="navbar ">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" 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>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="#">Главная</a>
        </li>
        <li>
          <a href="#">Демо-доступ</a>
        </li>
        <li>
          <a href="catalog.html">Каталог</a>
        </li>
        <li>
          <a href="contact.html">Контакты</a>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

2 ответа 2

3

Высота навбара в бутстрапе влияет не только на .navbar { height: xxx; }, но и на свойства других компонентов, например отступов у ссылок .navbar .nav > li > a { padding: xxx; }.

Исходники бутстрапа написаны в LESS (SASS в четвертой версии), оба препроцессора позволяют использовать переменные для кастомизации стилей. На высоту навбара влияет переменная $navbar-height.

Так как вы не используете LESS/SASS-версию бутстрапа, возможности повлиять на высоту навбара у вас две:

  • Перейти на http://getbootstrap.com/customize/, поменять значение @navbar-height и собрать себе уникальный css-файл, и подключить уже его, вместо https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css

  • Открыть исходники бутсрапа и найти все места, где фигурирует переменная $navbar-height, пересчитать значения свойств во всех этих местах и разместить стили у себя, они применятся поверх стандартных бутстраповских

1
  • оба совета помогли. ty
    – DaniiL337
    6 сен 2016 в 10:56
3
.navbar-nav>li>a {
  color: white;
}

Добавьте сюда padding-top: 3px; (чтобы сохранить небольшой отступ сверху)
Также по необходимости можно добавить: font-size: 12px;
(Возможно больше, возможно меньше, необходимо отталкиваться от размера шрифта в зависимости от Ваших нужд, насколько нужно уменьшить меню)

То есть в итоге у вас должно получиться примерно так:

.navbar-nav>li>a {
     color: white;
     padding-top: 3px;
     font-size: 12px;
    }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.