Power By 专否社区

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

Go To StackoverFlow.com

6

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>
2012-04-04 01:14
by vfilby
Can you post your full navbar html setup? that class should work by default since its already included in the bootstrap - Andres Ilich 2012-04-04 01:20
I added more HTML. I also thought that that .pull-right should just override the .navbar-search - vfilby 2012-04-04 01:54
just tested the class with your code and its working fine, http://jsfiddle.net/N6vGZ/4/, what exactly is not working - Andres Ilich 2012-04-04 02:19
After looking at you linked example, I decided to link directly to the github bootstrap.css file, and it works. The gem that includes the bootstrap css must be using an older or mangled version. If you add an answer I'll mark it for you - vfilby 2012-04-04 12:06
spot on!, that is one of those issues that give many many headaches until you find that the issue was so simple to fix. Posted an answer - Andres Ilich 2012-04-04 12:26

8

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.

2012-04-04 12:24
by Andres Ilich

-3

Add !important to .pull-right

.pull-right {
  float: right !important;
}
2012-04-04 01:17
by David Nguyen
Ads