Bootstrap .pull-right не влияет .navbar-search

Я хотел бы использовать класс .navbar-search в Boostrap, но я бы хотел использовать его с .pull-right. Однако .pull-right, похоже, не влияет на строку поиска, поскольку .navbar-search имеет float: оставил в нем и, похоже, переопределяет .navbar-search.Bootstrap .pull-right не влияет .navbar-search

Есть ли очевидный способ заставить его работать с Bootstrap или мне нужно просто добавить пользовательский css для поиска поплавкового nab?

HTML (Сформирован из Haml в приложении рельсы)

<form accept-charset="UTF-8" action="/search" class="navbar-search pull-right" method="get"> 
    <div style="margin:0;padding:0;display:inline"> 
    <input name="utf8" type="hidden" value="✓"> 
    </div> 
    <input class="search-query" id="q" name="q" placeholder="Search" type="text"> 
</form>

Сформирован CSS:

.navbar-search { 
    position: relative; 
    float: left; 
    margin-top: 6px; 
    margin-bottom: 0; 
} 
bootstrap.css:236 

.pull-right { 
    float: right; 
} 
bootstrap.css:525

Полный Nav (Сформирован из Haml):

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     ... 
     <form accept-charset="UTF-8" action="/search" class="pull-right navbar-search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"></div> 
       <input class="search-query" id="q" name="q" placeholder="Search" type="text"> 
     </form> 
    </div> 
    </div> 
</div>

источник

2012-04-04 vfilby

Можете ли вы опубликовать полную настройку html navbar? этот класс должен работать по умолчанию, поскольку он уже включен в bootstrap. –

Я добавил больше HTML. Я также подумал, что это .pull-right должно просто переопределить .navbar-search. – vfilby

просто проверил класс с вашим кодом и его работоспособность, http://jsfiddle.net/N6vGZ/4/, что именно не работает? –

После тестирования класса с самым текущим листом bootstrap.css мы обнаружили, что класс .pull-right не был доступен в старой версии бутстрапа, поэтому обновление устраняет проблему.

Demo класса, который используется с последним загрузочным листом.

источник

2012-04-04 12:24:25

-3

Добавить важно! .pull-right

.pull-right { 
    float: right !important; 
}

источник

2012-04-04 01:17:44

Bootstrap .pull-right не влияет .navbar-search

ответ

Смежные вопросы