Twitter Bootstrap Navigationsleiste Behoben

Was muss ich ändern, um die Navigationsleiste behoben, wenn der Display-Größe unter 940px? Ich möchte nicht, dass es reagiert. Wenn Sie die Größe Ihrer browser-Fenster unter 940px Sie werden sehen, dass scroolbar-x (unten scrollbar) angezeigt wird, aber wenn Sie einen Bildlauf nach rechts in der Navigationsleiste position fixiert ist, und einige-Menü nicht angezeigt.

Twitter Bootstrap Navigationsleiste Behoben

Vielleicht einige Bild erklären, was mein problem ist.

  • Wenn Sie möchten, dass Ihre CSS-änderungen zu einer bestimmten Auflösung, die Sie verwenden müssen, responsive design, z.B. media queries
  • Hinzufügen von ein Vergleich zu Facebook, ist nicht sinnvoll, da die Fb in der Navigationsleiste ist nicht behoben, also nicht leiden, das gleiche problem.
  • ja, es macht keinen Sinn, aber wenn Sie schalten Sie Ihr javascript auf facebook, die navbar wird so sein wie bei Twitter, das Menü wird nicht angezeigt, wie wir navigieren Sie nach rechts.
  • nicht alle Kunden wollen eine responsive website, so dass ich denke, wenn nur twitter bootstrap ein paar mehr Skript zum fixieren der Navigationsleiste, es wird groß sein. Nach der Suche auf google, fand ich diese script, aber noch bin ich nicht in der Lage, Sie zu implementieren, zu meiner navbar.
  • Das Skript ist genau das, was Sie zu benötigen scheinen, Sie können erklären, Ihr navbar als fixed in CSS verwenden Sie dann die ScrollSpy zu machen, y-Scrollbar (die anmutig degradieren für das was Sie momentan erleben, wenn der Benutzer kein JS aktiviert ist).
  • Ich habe eine Umsetzung des Skripts auf meine Antwort.

InformationsquelleAutor yudayyy | 2012-06-27
  1. 3

    Das kann nicht sein fertig in CSS allein.

    Das Beispiel, das Sie geben (Twitter) hat die navbar mit festen position UND festen Größe auf allen Bildschirmgrößen. Feste position bedeutet, dass die Scrollbalken sich nicht auf die position der Navigationsleiste, und das ist, warum Sie nicht verwenden können, die x-Bildlaufleiste zu sehen, die Teil der Navigationsleiste, die, sobald es weniger als 940px Breite, versteckt, "unter" dem rechten Rand des browser-Fensters.

    Damit Sie die Wahl haben, entweder

    1. Haben eine festen position, Feste Größe navbar die derzeit an der Spitze, egal wie weit der Benutzer führt einen Bildlauf nach unten und akzeptieren, dass unter einen genügend kleinen Bildschirm, die Sie nicht in der Lage sein, um horizontal zu scrollen, um alles zu sehen, ODER
    2. Haben eine festen position, fluid Größe navbar passt sich in seiner Breite, um Platz für unterschiedliche Bildschirm-Größen, die hoffentlich Milderung der Rollen müssen horizontal, in den ersten Platz, vor allem, wenn Sie lassen es wachsen vertikal, wenn dessen Inhalt passen nicht in eine Zeile, ODER
    3. Haben eine non-fixed position, Feste Größe navbar, die reagieren auf horizontale scrollen, aber nicht immer vorhanden, wenn der Benutzer scrollt auf der Seite nach unten.

    Effektiv, Sie kann nicht position Arbeit ein Weg in x-Richtung und die andere in y.

    Können Sie sehen, was ich damit meine, option 2 durch die Bearbeitung der folgenden Klassen in die Twitter-Seite mit den CSS-Inspektor:

    .global-nav .container {
    width: auto;
    max-width: 865px;
}
.global-nav, .global-nav-outer {
    height: auto;
}

    Den zweiten Selektor implementiert die vertikale Fluidität für einmal können die Inhalte passen nicht in eine Zeile.

    Können Sie sehen, was ich damit meine, option 3, indem Sie diese Veränderungen:

    .topbar {
    position: absolute;
    /* ... the rest as is */
}

    BEARBEITEN

    Natürlich, dass es nicht getan werden kann in CSS bedeutet nicht, dass es nicht getan werden kann überhaupt. Hier ein jsfiddle Umsetzung, das Skript, die Sie erwähnt. Dies nutzt MooTools, im Gegensatz zu jQuery, das ich normalerweise mit bootstrap.

    Fiedel: http://jsfiddle.net/uadDW/4/

    Vollbild-version, um besser zu sehen, die Wirkung: http://jsfiddle.net/uadDW/4/show/

    (Dank an @Sherbrow für die Bereitstellung der base-Geige, mit der ich habe diesen).

    • Vielen Dank @EzequielMuns, es funktioniert Super!
    InformationsquelleAutor Ezequiel Muns
  2. 1

    Lief in das gleiche problem und war begeistert, mit der vorgeschlagenen Lösung, aber dann habe ich gekämpft, um zu implementieren, in meinem eigenen code (ja, noobie).

    Es stellt sich heraus, dass es einen Konflikt gibt hier mit jquery.js, was brauche ich an anderer Stelle in meinem code.

    http://jsfiddle.net/uadDW/83/

    /* code as before .. only added jquery.js link */

    Entfernen jquery.js von der Externen Ressourcen in den oben genannten fiddle und Sie erhalten die ursprüngliche, gewünschte Verhalten. Ratten!

    InformationsquelleAutor sai
Schreibe einen Kommentar