Я экспериментирую с примером Carousel в Twitter Bootstrap 3.1.1, и я упал на первое препятствие. Я хочу, чтобы добавить правильное выровнен окно поиска на панели навигации, поэтому я добавил следующий код (я включил некоторые из существующего кода для контекста):Twitter Bootstrap 3.1.1 navbar-right overflows navbar
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<!-- my insertion starts here -->
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
<!-- my insertion ends here -->
</div>
</div>
</div>
Введенный код был взят из Щебетать Bootstrap «Default navbar» на странице «Компоненты». Я вставил его в эквивалентную позицию навигационной панели Carousel, изменив «navbar-left» на «navbar-right». К сожалению, окно поиска нависает с правой стороны панели навигации примерно на 15-20 пикселей (я также удалил кнопку «Отправить» из приведенного выше примера, но если я верну ее обратно, кнопка «Отправить» нависает на панели навигации в так же). Что я тут сделал?
(Edit: включен раздел всего NavBar в соответствии с просьбой)
У вас есть jsfiddle или что-то в этом роде? –
Нет, я загрузил документы и внес изменения на свой локальный компьютер. –
@DamianWalker вы могли бы включить весь html navbar? – Thunda