it-swarm.com.de

Verhindern Sie, dass das Menü in 768px-CSS-Medienabfragen kollabiert

Ich versuche, eine Website mit Twitter-Bootstrap zu erstellen. Ich habe relativ weniger Menüs, daher passt es irgendwie in das 768px-Display. Im Bootstrap wird das Menü jedoch standardmäßig mithilfe von Medienabfragen ausgeblendet. Ich kann dieses Verhalten nicht verhindern.

The menu when not collapsed

Then menu collapses ones width less than 768px

Dies ist mein HTML

<div class="row">
    <div class="span3 logo"><h1><img src="img/logo.png" /></h1></div>
    <div class="span9">

        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
              <div class="nav-collapse">
                <ul class="nav nav-pills">
                  <li><a href="#">Home</a> </li>
                  <li><a href="#">Services</a> </li>
                  <li><a href="#">Portfolio</a> </li>
                  <li><a href="#">Contact Us</a> </li>
                </ul>
              </div>
            </div>
          </div>
        </div>



    </div>
    </div>

Ich weiß, dass es etwas mit der Medienabfrage in Bootstrap zu tun hat, die aber nicht verstehen kann.

26
esafwan

Sie möchten den Abschnitt lesen: Verwenden der Medienabfragen auf der Bootstrap-Site: http://getbootstrap.com/2.3.2/scaffolding.html#responsive (Bootstrap 2.3 .2) http://getbootstrap.com/getting-started/#disable-responsive (Bootstrap 3)

Sie sollten die relevanten Medienabfragen verwenden, um die Stile zu überschreiben, die Bootstrap hinzufügt, wenn Ihr Ansichtsfenster verkleinert wird.

  // Landscape phones and down
  @media (max-width: 480px) { ... }

  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }

  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 980px) { ... }

  // Large desktop
  @media (min-width: 1200px) { .. }

Wenn Sie nicht möchten, dass die Navigationsleiste kollabiert, entfernen Sie den 'collapse' aus dem Klassennamen. Sie sollten wahrscheinlich loswerden:

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

Kurz gesagt, werfen Sie einen Blick auf die Dokumente. Hier finden Sie einen Abschnitt mit dem Titel "Optionale responsive Variation": http://getbootstrap.com/2.3.2/components.html#navbar ( Bootstrap 2.3.2)

16
Galaxy

Sie können Twitter Bootstrap css compilieren it aus sass-Twitter-bootstrap-scss-Dateien anpassen und $navbarCollapseWidth in _variables.scss auf den gewünschten Wert setzen ...

Bearbeiten

Wie @Accipheran in den Kommentaren angegeben hat, lautet der Name der Variablen, die Sie für Bootstrap 3.x setzen sollten, $grid-float-breakpoint.

32
pine3ree

Das hat gut für mich funktioniert:

.nav-collapse, .nav-collapse.collapse {
    overflow: visible;
}   
.navbar .btn-navbar {
    display: none;
}   
9
Matt Jackson

Wenn ich die Antworten lese, glaube ich, dass Sie über Bootstrap Version 2 sprechen. Vielleicht kommt jemand, der nach einer Antwort für Bootstrap 3 sucht, hier an. Diese Antwort ist für Sie!

  1. Gehe zu Bootstrap-Anpassungsseite
  2. definieren Sie den @ grid-float-breakpoint-Wert für etwas Hartcodiertes (z. B. 520px) oder für eine kleinere Bildschirmgröße wie @ screen-xs-min
  3. Klicken Sie auf die Schaltfläche am unteren Rand der Seite, um die CSS-Dateien neu zu kompilieren
  4. ersetzen Sie Ihre Dateien bootstrap.css und bootstrap-min.css durch die Dateien aus der heruntergeladenen Zip-Datei.
8
neves

variable finden:

@ Grid-Float-Haltepunkt

die auf @ screen-sm eingestellt ist, können Sie sie nach Ihren Bedürfnissen ändern.

Wenn Sie die herstellerlose Datei überschreiben, setzen Sie die Variable auf 0px, zB:

@ Grid-Float-Haltepunkt: 0px;

2
Andreas Ek

Dieses Beispiel stammt von der offiziellen Website: http://getbootstrap.com/examples/non-responsive/

Die Änderungen sind in nicht responsive.css , aber die wichtigen Teile von .navbar sind:

body {
    padding-top: 70px;
    padding-bottom: 30px;
}
.page-header {
    margin-bottom: 30px;
}
.page-header .lead {
    margin-bottom: 10px;
}
.navbar-collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left;
    margin: 0;
}
.navbar-nav > li {
    float: left;
}
1
Alastair

Wenn Sie die minimierende Navigationsleiste vollständig deaktivieren möchten, fügen Sie diese Variable in Ihre benutzerdefinierte LESS-Datei ein:

@grid-float-breakpoint: 0px;
1
Fred K

Wenn Sie nichts weiter tun möchten, als das Navigationssystem nicht zu kollabieren, bis ein kleinerer Wert erreicht ist, gehen Sie am besten auf die Twitter Bootstrap-Anpassungsseite , ändern Sie den @navbarCollapseWidth in den gewünschten Wert und laden Sie das Paket herunter . Erledigt.

Wenn Sie das, was auf dieser Seite möglich ist, anpassen möchten, müssen Sie es überschreiben oder anpassen, wie in den anderen Antworten beschrieben.

1
Ross Hambrick

Folgendes habe ich für Bootstrap 3.3.4 verwendet. Es ist ein Hack, aber es ist auch kein 2-Tage-Fix, der die CSS korrigiert.

@media (min-width: 768px) and (max-width: 979px) {
  .navbar-header {
    width: 100% !important;
  }
  .navbar-toggle {
    display: inline-block !important;
    float: right !important;
  }
}

Möglicherweise müssen Sie die Selektoren anpassen, aber im Grunde machen Sie die Kopfzeile in voller Breite, zeigen und schwenken Sie die Schaltfläche nach rechts.

0
Michael Cole