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

Question

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

我正在使用标准引导代码：

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

Answer 2

您可以进行以下操作：

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

我不知道为什么但是向左拉是没用的。