Бутстрап выравнивание по ширине элементов

Question

мне нужно организовать самозагрузки ввода-группу и таблетки Navbar следующим образом:

http://picload.org/image/cwgpppp/bootstrap.png

ввода-группа должна иметь ширину навигационной панели, которая является динамическим и зависит от формулировка навигационной панели. Моя HTML структура выглядит следующим образом:

http://www.bootply.com/efEXkT1CSR

Я понятия не имею, как достичь этого. Надеюсь, кто-нибудь может мне помочь! Thanks

Answer 1

Одна из возможностей (слегка грязная, но не работает) заключается в использовании комбинации display: inline-box и position: absolute.

1. Обертка нав и поиск группы внутри другого элемента, такого как <header> (<div> также будет работать).

2. Добавить display: inline-box в nav так, что она не занимает всю ширину своего родителя (<header>), но вместо этого подходит к размеру своих детей.

3. Добавить position: absolute; top: 0; left: 0; right: 0; в .form-group (используйте специальный класс здесь в реальном сценарии, чтобы он не менял другие группы форм). Это будет означать, что header больше не будет выполняться по ширине группы форм, а также сделает группу форм растянутой в левый и правый края заголовка.

4. Добавить position: relative; display: inline-block; padding-top: 40px; в header. Позиция такова, что группа форм будет помещена в заголовок. Дисплей так, что header не занимает полную ширину своего родителя (<header>), но подходит для размера его детей (в данном случае nav). Заполнение происходит потому, что nav не будет нажата группой поиска из-за абсолютной позиции.

Конечный результат должен быть что-то вроде этого:

HTML

<header> 
    <div class="form-group"> 
     <div class="input-group"> 
      <input class="form-control" id="text" type="text" placeholder="Search ..."> 
      <span class="input-group-addon glyphicon glyphicon-search"></span> 
     </div> 
    </div> 
    <ul class="nav nav-pills"> 
     <li><a href="#">Home</a> 
     </li> 
     <li><a href="#">One</a> 
     </li> 
     <li><a href="#">Two</a> 
     </li> 
    </ul> 
</header> 

CSS

header { 
    position: relative; 
    display: inline-block; 
    padding-top: 40px; 
} 

.nav { 
    display: inline-block; 
} 

.form-group { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
} 

Demo on Bootply

Дайте мне знать, если у вас есть вопросы.