Links - und rechtsbündiger text in der gleichen Zeile in ein Bootstrap dropdown

Es ist üblich, für Menüs auf desktop-apps zeigen den Namen der Aktion auf der linken Seite und der Tastatur-shortcut auf der rechten Seite, wie diese.

Will ich tun die gleiche Sache in ein Bootstrap dropdown-Menü. Allerdings kann ich nicht scheinen, um es zu arbeiten. Ich habe versucht mehrere Dinge. Hier ist der code für die beiden nächsten versucht und ein link zu einem demo.

<ul class="nav navbar-nav">
  <li class="dropdown">
    <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">Try 1 <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#"><span class="text-muted pull-right">Alt+P</span>Label</a></li>
      <li><a href="#"><span class="text-muted pull-right">Alt+P</span>Long long long long long label</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">Try 2 <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#"><span class="pull-left">Label</span><span class="text-muted pull-right">Alt+P</span></a></li>
      <li><a href="#"><span class="pull-left">Long long long long long label</span><span class="text-muted pull-right">Alt+P</span></a></li>
    </ul>
  </li>
</ul>

Wieder, hier ist ein link zu einer demo.

Beiden Versuchen 1 und Versuch 2 Arbeit für eine kurze labels, aber nicht für lange Beschriftungen.

Versuchen mit 1, das problem ist, dass das label und die Verknüpfung überlappen.

Versuchen mit 2, das problem ist, dass die Verknüpfung wird geschoben, um eine weitere Zeile, und es gibt auch einige Verrücktheit mit der Maus über die Elemente.

Was ich will, ist für Sie alle zu sein, auf einer Linie, so dass Sie etwas sehen, wie diese (das Bild ist nur ein fake, die ich in GIMP).

InformationsquelleAutor dumbmatter | 2013-12-08
  1. 3

    Ich habe versucht, viele Möglichkeiten, um das Ergebnis mit der Bootstrap-Klassen, aber ich denke, Sie brauchen ein wenig custom-CSS. Hier ist ein Beispiel :

      <ul class="nav navbar-nav">
    <li class="dropdown">
      <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown menu <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Label <span class="kbd text-muted">Alt+S</span></a></li>
        <li><a href="#">Not labeled</a></li>
        <li><a href="#">Long long long long long label <span class="kbd text-muted">Alt+L</span></a></li>
      </ul>
    </li>
  </ul>
    .dropdown-menu > li > a {
    position: relative;
    padding-right: 70px;
}
.dropdown-menu > li > a > span.kbd {
    position: absolute;
    right: 20px;
    top: 3px;
}

    Aktualisiert Bootply

    InformationsquelleAutor zessx
  2. 2

    Kann man sich http://bootply.com/99291

    und suchen Sie diesen code :

      <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">Try 1 <b class="caret"></b></a>
  <ul class="dropdown-menu">
    <li><a href="#"><span class="text-muted pull-right">Alt+P</span>Label</a></li>
    <li><a href="#"><span class="text-muted pull-right">Alt+P</span><span style="white-space: normal;">Long long long long long label</span></a></li>
  </ul>

    Ihre sehr langen text ist, wickeln Sie Sie in ein span mit <span style="white-space: normal;">

    Tut es render besser für das, was Sie wollen ?

    • Ich hätte mehr klar in meinem ursprünglichen Beitrag, ich will, dass es alle in einer Zeile stehen. Werde ich Bearbeiten, meine Frage. Danke!
    InformationsquelleAutor Pimento Web
Schreibe einen Kommentar