0

Делаю меню на bootstrap и появляется такая ошибка, в последний элемент меню слишком длинный, подскажите как исправить?

.menu-top {
  background: #77b9d6;
  color: #fff;
  border-radius: 0px 0px 20px 20px;
}
.menu-top a {
  border-right: 1px solid #fff;
  color: #fff;
}
.menu-top a:hover {
  background: #055f86;
  color: white;
}
div a:last-child {
  border-right: none;
}
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="story " id="slide-1" data-slide="1">
  <nav role="navigation" class="navbar navbar-default navbar-static-top col-sm-10  col-sm-offset-1 menu-top text-center">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a href="#slide-2" class="active navbar-brand col-sm-2">text</a>
      <a href="#slide-2-1" class="active navbar-brand col-sm-2">text</a>
      <a href="#slide-2-2" class="active navbar-brand col-sm-2">text</a>
      <a href="#slide-2-3" class="active navbar-brand col-sm-2">text</a>
      <a href="#slide-2-4" class="active navbar-brand col-sm-2">text</a>
    </div>
</div>
1
  • будет гораздо лучше если Вы на скриншоте или на ином примере покажите, что бы Вы хотели получить
    – Alex
    Commented 22 окт. 2015 в 17:16

2 ответа 2

1

Это не последний элемент длинный, это ваш обрамляющий блок растянут по всей ширине экрана. Если на скорую руку то можно сделать так:

.navbar-header {
  display: inline-block;
}

nav.navbar {
  display: inline-block;
}

Свойство display-block растягивает родительский элемент по размеру дочернего

3
  • если я использую ваш код,то текст не растягивается по всей длине блока, как исправить сеё положение? Commented 22 окт. 2015 в 16:44
  • @ChromeChrome растягивается, пример
    – Alex
    Commented 22 окт. 2015 в 17:16
  • jsfiddle.net/61s9Lk2e выделяется маленький прямоугульник, а не весь блок, т.е элемент полностью не растянулся Commented 22 окт. 2015 в 17:34
0

Вам не кажется, что вы просто забыли закрыть тег <nav>?

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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