Bootstrap-Selektor dropdown-Menü.pullright nicht funktioniert?

Bootstrap .dropdown-Menü.pull-rechts-Selektor scheint nicht zu funktionieren (der code in der navbar.weniger, Linien 330 341).

Wie Sie sehen können auf dieser screenshot, die bis Cursor nicht nach rechts ausgerichtet.

Mein dropdown-Menü-Klasse : 

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

Wenn ich der Linie 286 bis 

right:10px;

funktioniert es einwandfrei.

Jede Idee, wie man dieses Problem beheben ?

Hier ist mein html code:

      <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>
  • Können Sie veröffentlichen, markup?
InformationsquelleAutor arthur.sw | 2012-06-12
  1. 3

    Aus deinem screenshot, würde ich davon ausgehen, dass Sie verwendet haben .btn-group-Klasse zu machen, Ihre weiße Schaltfläche anmelden.

    Zuweisen "pull-right" - Klasse für das div-element mit btn-group-Klasse anstelle der ul-element.

    Korrekte Html-markup

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

    Basierend auf dem, was ich analysiert, auf der twitter bootstrap, benötigen Sie die folgenden css zu arbeiten.

    .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; }
    • Ich verwenden .pull-rechts an (btn-group und im dropdown-Menü), wenn ich es nur auf die btn-group, das Menü nicht korrekt ausgerichtet.
    • Sind Sie mit dem voll-bootstrap.css oder angepasste bootstrap.css? Auch die post-markup für die navigation-bar Abschnitt.
    • Ich benutze benutzerdefinierte weniger, aber ich wusste nicht, ändern Sie den code über die drop-down-Menü.
    • Bitte prüfen Sie, ob die css, die Sie haben, enthält die oben genannten css und korrektes markup. Wenn es nicht funktioniert, schlage ich vor, dass Sie die volle version und sehen, welches Teil des css, der Ihre individuelle weniger austreten. Beachten Sie, dass die angepasste Funktion aus dem twitter bootstrap-Website nicht wirklich das beinhalten, was Sie brauchen. Es passiert mir, als spielte ich mit twitter bootstrap vor. Auch, verwenden Sie firebug-Analyse der css-code, wenn Sie firefox verwenden, andernfalls verwenden Sie die chrome-Inspektor-tool, wenn Sie mit chrome.
    InformationsquelleAutor Shawn Ang
  2. 1

    Hier ist, was ich nicht verstehe:

    1) Die boostrtap Selektor in der navbar.weniger Zeile 329-330

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

    trifft nicht mein dropdown-Menü, weil ich nicht die Eltern .nav-Klasse in meiner Hierarchie.

    2) Meine .dropdown-menu der Klasse .ziehen rechts, und das passt nicht:

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

    aber das bedeutet:

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

    3) konnte ich nicht richtig Debuggen, bis ich entfernt -yui-compress-option der less compiler 😉

    Vielen Dank für alles!

    InformationsquelleAutor arthur.sw
Schreibe einen Kommentar