Question

Bootstrap .dropdown-menu.pull-right选择器似乎不起作用（代码在navbar.less，第330到341行）。

正如您在this screenshot上看到的那样，向上插入符号与右侧不对齐。

我的下拉菜单类：

<ul class="dropdown-menu pull-right">

当我将第286行更改为

时

right:10px;

它工作正常。

有关如何解决此问题的任何想法？

这是我的HTML代码：

      <div id="USE_dropdown_signin" class="btn-group pull-right">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="icon-user"></i> Sign in
        </a>
        <ul class="dropdown-menu pull-right">
          <form action="" method="post" accept-charset="UTF-8">{% csrf_token %}
            <input id="USE_signin_username" type="text" name="signin[username]" size="30" placeholder="User Name"/>
            <input id="USE_signin_password" type="password" name="signin[password]" size="30" placeholder="Password"/>
            <input id="USE_signin_remember_me" type="checkbox" name="signin[remember_me]" value="1" />
            <label id="USE_signin_remember_me_label" class="string optional" for="signin_remember_me"> Remember me</label>
            <input id="USE_signin_submit" class="btn btn-primary" type="submit" name="commit" value="Sign in" />
          </form>
        </ul>
      </div>

Answer 1

从截图中我可以假设你已经使用.btn-group类来制作白色登录按钮。

将“pull-right”类分配给包含btn-group类而不是ul元素的div元素。

更正Html标记

      <div class="btn-group pull-right">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="icon-user"></i> Username
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Profile</a></li>
          <li class="divider"></li>
          <li><a href="#">Sign Out</a></li>
        </ul>
      </div>

根据我在twitter bootstrap上分析的内容，您需要以下css才能正常工作。

.navbar .pull-right .dropdown-menu, .navbar .dropdown-menu.pull-right {
    right: 0;
    left: auto;
}
.pull-right > .dropdown-menu {
    right: 0;
    left: auto;
}
.pull-right { float: right; }

Answer 2

这是我不明白的地方：

1）navbar.less第329-330行中的boostrtap选择器

    .navbar .nav.pull-right .dropdown-menu,
    .navbar .nav .dropdown-menu.pull-right {}

与我的下拉菜单不匹配，因为我的层次结构中没有父.nav类。

2）我的.dropdown-menu有类.pull-right，这不匹配：

    .navbar .dropdown-menu:before .pull-right {
     left: auto;
     right: 9px;
    }

但这样做：

    .navbar .pull-right .dropdown-menu:before {
      left: auto;
      right: 9px;
    }

3）在删除less编译器的-yui-compress选项之前，我无法正确调试; - ）

感谢您的一切！

Bootstrap select dropdown-menu.pull对不起作用？

2 个答案: