Сделать элемент растянуть всю ширину в Bootstrap

Question

навигационной панели Это схема навигационной панели для веб-приложений Я разрабатываю:

[Brand [кнопка] [кнопка] [----- поле ввода --- -] ----- пустое пространство ----- [кнопка]]

Мой код (упрощенно) выглядит следующим образом:

<div class="container-fluid"> 
    <div class="navbar navbar-static-top no-print"> 
    <div class="navbar-inner"> 
     <a class="brand" href="#">Brand</a> 
     <ul class="nav"> 
     <li><a href="#"> 
      <i class="icon-large icon-group"></i> 
     </a></li> 
     <li><a href="#"> 
      <i class="icon-large icon-list"></i> 
     </a></li> 
     <li id="search"> 
      <form class="navbar-search"> 
      <input type="text" class="input-xxlarge" placeholder="Search"> 
      </form> 
     </li> 
     <li><a href="#"> 
      <i class="icon-large icon-plus"></i> 
     </a></li> 
     </ul> 
     <ul class="nav pull-right">  
     <li><a href="#"> 
      <i class="icon-large icon-lemon"></i> 
     </a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

Я хочу, чтобы поле ввода, чтобы скрыть пустое пространство и дойдете до кнопки на правой стороне моего навигатора. Как я могу это достичь?

Answer 1

Прежде всего, это невозможно с помощью только CSS-бутстрапа. Bootstrap использует столбцы для размещения своего контента, который не так динамичен, как вам нужно.

Я бы рекомендовал использовать абсолютное позиционирование для достижения этого.

.navbar-inner { 
    position: relative; 
} 

.navbar-inner .input-xxlarge { 
    position: absolute; 
    left: (pixels from the left); 
    right: (pixels from the right); 
    width: auto; 
} 

Отказ от ответственности: этот вход должен был бы быть изменен обратно position: relative; width: 100%;, когда вы получаете размера экрана мобильного (может возиться с этим один)