Twitter Bootstrap按钮组项目被切断屏幕

Question

我从页面查看区域中获取了按钮下拉列表的某些部分.

我正在使用标准的bootstrap代码:

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

我在页面底部也有类似的问题,我有另一个按钮下拉列表然后下拉部分打开,它不会自动调整自己,我必须向下滚动才能查看所有选项.

有什么建议吗？

Answer 1

我猜你没有.btn-group以正确的方式定位.

将它放入.navbar-inner-div并添加类.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>