Выравнивание элементов с помощью bootstrap css

Question

Я создал пункты меню начальной загрузки и оставил FLIP.

FIDDLE

Здесь проблема в том, что FLIP должен быть просто рядом с окном, но она появляется недостаток?

HTML:

<div class="magic-container">    
    <div class="input-group"> 
     <input type="text" class="typeahead form-control" placeholder="Select category ..." /> 
       <ul class="dropdown-menu"> 
        <li id="one"><a href="#">Sports</a></li> 
        <li role="presentation" class="divider"></li> 
        <li id="two"><a href="#">Entertainment</a></li> 
        <li role="presentation" class="divider"></li> 
        <li id="three"><a href="#">Politics</a></li> 
        <li role="presentation" class="divider"></li> 
        <li id="four"><a href="#">Business</a></li> 
        <li role="presentation" class="divider"></li> 
        <li id="four"><a href="#">Travel</a></li> 
        <li role="presentation" class="divider"></li> 
        <li id="four"><a href="#">Celebrity</a></li> 
        <li><a href="#"></a></li> 
       </ul> 

       <span class="flip"> 
        <span class="dropDownFlip">  
         <a href="#"> FLIP </a> 
        </span> 
       </span> 
      </div> 
     </div> 

Answer 1

Ваш input оказывает ширина 100% применяется к нему. Он применяется из файла bootstrap.min.css. При добавлении следующей строки в CSS он исправляет проблему:

.input-group .form-control { 
    width: auto; 
} 

Вот ваш jsFiddle обновляется.

Обновление: Поскольку это изменение существующего класса и может повлиять на элементы в другом месте на вашей странице/сайте, вы можете создать новый класс для этого конкретного экземпляра. Что-то, как это будет работать:

.input-group .floatLeft { 
    float: left !important; 
    width: auto; 
} 

и просто добавить класс floatLeft к введенному.

Answer 2

Попробуйте добавить следующие стили в вас стилей

.magic-container .input-group input { 
    float: left; 
    margin-right: 2%; 
    width: 70%; 
    } 

.flip { 
    float: left; 
    }