CODEWITHSUNDEEP
csstwitter-bootstrap
HUSTEN
HUSTEN

Reputation: 5197

Why drop-down box won't be showing up at the right spot with bootstrap?

Why drop-down box won't be showing up right next to search box??

I edited added most of the parts. from body to the end of navigation bar. I'm using official bootstrap.css

Anyone has idea??

Please help!!

ScreenShot

  <body>

  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>

            <a href="/" class="brand">Test</a>



            <div class="nav-collapse collapse navbar-responsive-collapse">
                <ul class="nav">
                    <li><a href="#"><i class="icon-home"></i> Top</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li class="nav-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
                </ul>



            <form accept-charset="UTF-8" action="/communities" class="navbar-search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>

            <div class="input-append">
            <input class="span3" id="search" name="search" type="text" />
              <div class="btn-group">
                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
            </div><!-- /input-append -->

</form>         
            </div>        


            <div class="pull-right">


                <div class="btn-group">
                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="icon-user"></i> 
                    Mike                    <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                    <li><a href="/users/edit"><i class="icon-cog"></i> Edit</a></li>
                    <li class="divider"></li>
                    <li>
                    <a href="/logout"><i class="icon-chevron-up"></i> Log out</a>       
                    </li>
                    </ul>
                </div>
            </div>


        </div>
    </div>
</div>

Upvotes: 0

Views: 369

Answers (2)

Pavlo
Pavlo

Reputation: 44899

Looks like this is a bug in BS. Add this rule to your CSS:

.navbar .input-append .btn-group {
  margin-top: 0;
}

Your fiddle updated.

Upvotes: 1

tam
tam

Reputation: 352

Try this code it will solve your problem 

.navbar .btn, .navbar .btn-group {
margin-top: 0px !important;
}

Upvotes: 0

Related Questions