Navbar с фиксированной, но не полной шириной

Используя 2.1.1 Twitter Bootstrap, я пытаюсь создать навигационную панель, которая закреплена в верхней части страницы, но которая не:

<div class="container">
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="brand" href="#">Project name</a>
        <div class="nav-collapse collapse">
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>
</div>

Если я удалю класс navbar-fixed-top:

  <div class="navbar navbar-fixed-top">

к

  <div class="navbar">

тогда navbar заканчивается тем, что мне нравится - всего 940 пикселей шириной вместо полной ширины - но тогда, конечно, он больше не фиксируется в верхней части страницы. Как я могу сохранить эту навигационную панель в верхней части страницы без ее полной ширины?

Ответы

Ответ 1

Вы можете переопределить позиционирование Bootstrap, установив его на фиксированный - используйте absolute, если вы не хотите, чтобы он прокручивался со страницы:

.navbar {
    position: fixed !important;
    top: 0px;
    width: 940px;
}

(подумайте о том, чтобы дать ему ID, если вы планируете использовать несколько навигаторов)

Ответ 2

Вы можете создать фиксированный navbar-fixed-top или nav-bar-bottom-bottom, не имея полной ширины и не реагируя на любой размер экрана.

Шаг 1: добавьте те css: (создаю класс css под названием: .navbar-fixed-width)

@media all and (min-width: 768px) {
  .navbar-fixed-width {
    width: 768px;
    margin-left: auto;
    margin-right:auto;
 }
}

@media all and (min-width: 992px) {
  .navbar-fixed-width {
    width: 992px;
    margin-left: auto;
    margin-right:auto;
  }

}

@media all and (min-width: 1200px) {
  .navbar-fixed-width {
    width: 1200px;
    margin-left: auto;
    margin-right:auto;
  }
}

шаг 2: .navbar-fixed-width класс для навигации, подобный этому.

<div class="navbar navbar-inverse navbar-fixed-top navbar-fixed-width" role="navigation">
    <div class="container">
         <div class="navbar-header">
         </div>
    </div>
</div>

Ответ 3

Вы можете использовать свою оригинальную разметку и просто стиль (используя класс "navbar" в той ширине, которая вам нужна:

.navbar {
width: 50%;
}

<div class="container">
  <div class="navbar navbar-fixed-top">

Смотрите учебник здесь:

http://www.webdesignforbeginners.info/bootstrap-simple-navbars/

Ответ 4

Bootstrap 3+ должен иметь возможность обрабатывать динамическую ширину для вас, если вы нанесете свой navbar в div с помощью class container, тогда ширина будет динамической в ​​зависимости от доступного пространства.

Посмотрите Bootstrap css, а именно раздел container для более подробной информации.

Ответ 5

Меньше для решения Tommy Nguyen.

.navbar-fixed-width {
  margin-left: auto;
  margin-right: auto;

  @media all and (min-width: @screen-sm-min) {
    width: @screen-sm-min;
  }

  @media all and (min-width: @screen-md-min) {
    width: @screen-md-min;
  }

  @media all and (min-width: @screen-lg-min) {
    width: @screen-lg-min;
  }
}