Twitter Bootstrap button group items getting cut off the screen

Question

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?

Answer 1

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>

Answer 2

You can make the following:

.dropdown-menu {
   left: -80px;
}

I don't know why but pulling left is useless.