Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap .pull-right doesn't affect .navbar-search

I would like to use the .navbar-search class in Boostrap, but I would like to use it with .pull-right. However .pull-right doesn't seem to affect the search bar as .navbar-search has a float: left in it and that seems to override .navbar-search.

Is there an obvious way to make it work with Bootstrap or do I need to just add custom css for a float right nab search?

HTML (Generated from HAML in a rails app)

<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>

Generated CSS:

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

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

Full Nav (Generated from 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>
like image 309
vfilby Avatar asked Apr 04 '12 01:04

vfilby


1 Answers

After testing out the class with the most current bootstrap.css sheet, we found that the .pull-right class was not available under the older version of the bootstrap so updating that fixed the issue.

Demo of class being used with the latest bootstrap sheet.

like image 59
Andres Ilich Avatar answered Sep 26 '22 02:09

Andres Ilich