Центральная форма на navbar

Question

То, что я пытаюсь сделать, - это окно поиска в центре навигатора (image here). Как мне это сделать?

HTML:

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="brand" href="#">logo</a> 
     <div class="nav-collapse collapse"> 
     <form class="navbar-form pull-right"> 
      <div class="input-append"> 
      <input class="span4" id="appendedInputButton" type="text" placeholder="Search..."> 
      <button class="btn" type="button">Search</button> 
      </div> 
     </form> 
     </div><!--/.nav-collapse --> 
    </div> 
    </div> 
</div> 

Я использую CSS по умолчанию, который поставляется с Bootstrap.

Answer 1

Смотреть это ...

.nav-collapse{ 
    margin-right: 50%; 
} 

Example

Answer 2

, если вам нужно переопределить встроенный в CSS в приложении, используйте важно, как так:

<div style="margin: 0px auto !important;"></div> 

Или, положить его в классе CSS.

Answer 3

оберните форму элемента внутри своей собственной DIV и дать ему класс или идентификатор, а затем создать пользовательскую строку кода в центр его, например:

HTML:

<div id="search"> 
*form code here* 
</div> 

CSS:

#search { width: 200px; margin: auto; } 

Answer 4

Боролся с этим в течение длительного времени тоже, Bootstrap 3. я, наконец, нашел решение, которое работало отлично для меня: Bootstrap NavBar with left, center and right aligned items добавлен класс к внутренней моей навигационной панели вокруг моего окна поиска, с определение css в ответе Скелли.

Тогда мне пришлось применить text-align: слева к некоторым элементам в моей форме (например, предложения типа headhead, прикрепленные к моей форме поиска).