Twitter Bootstrap button group items getting cut off the screen

css, twitter-bootstrap

Solution

I guess you didn't position the `.btn-group` in the right way.

Put it into the `.navbar-inner`-div and add the class `.pull-right`.

DEMO JSFIDDLE

<div class="navbar">
  <div class="navbar-inner">
      <a class="brand" href="#">Title</a>
      <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
       <div class="btn-group pull-right">
        <button class="btn btn-info">Log In</button>
        <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Log In with Facebook</a></li>
          <li class="divider"></li>
          <li><a href="#">Create New Account</a></li>
        </ul>
      </div>
  </div>
</div>

Problem

I am getting some part of my button dropdown out of the page viewing area. I am using standard bootstrap code: ``` <div class="btn-group"> <button class="btn btn-info">Log In</button> <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Log In with Facebook</a></li> <li class="divider"></li> <li><a href="#">Create New Account</a></li> </ul> </div> ``` I have similar issue on bottom of the page also, where I have another button dropdown and then the dropdown part opens, it does not automatically adjust itself and I have to scroll down to view all the options. Any suggestion?

Original source