webentwicklung-frage-antwort-db.com.de

Wie kann ich die Navbar-/Containerbreite ändern? Bootstrap 3

Die Standardbreite für meine Navigationsleiste ist zu breit 1170px. Ich möchte es auf 940px reduzieren - aber ich möchte die Reaktionsfähigkeit beibehalten.

Ich habe versucht, die Containerbreite in CSS zu ändern, und es sieht mit einem großen Browser in Ordnung aus, aber der Rest der Seite fällt auseinander, wenn Sie nach mobilen Größen suchen.

Ist das die richtige Eigenschaft oder gibt es noch etwas?

@media (min-width: 1200px) {
  .container {
  max-width: 1170px;
}

Hier ist mein Navbar-Code

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>

          </button>
          <a class="navbar-brand" href="#">Site Name</a>
        </div>

        <div class="collapse navbar-collapse">

          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#shop">Shop</a></li>
            <li><a href="#showcase">Showcase</a></li>
            <li><a href="#help">Help</a></li>
            <li><a href="#my account">My Account</a></li>
            <li><a href="#cart">Cart <span class="glyphicon glyphicon-shopping-cart"></span></a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
  </div>
41
Mark

Ich habe dieses Problem gerade selbst gelöst. Sie waren auf dem richtigen Weg.

@media (min-width: 1200px) {
    .container{
        max-width: 970px;
    }
}

Hier sagen wir: Bei Ansichtsfenstern mit 1200 Pixel oder mehr - Max. Breite des Containers auf 970 Pixel einstellen. Dadurch wird die Standardklasse überschrieben, die die maximale Breite für diesen Bereich derzeit auf 1170px setzt.

ANMERKUNG: Stellen Sie sicher, dass Sie diese Datei NACH der Bootstrap.css-Datei hinzufügen (jeder hat diesen kleinen Fehler in der Vergangenheit gemacht).

Hoffe das hilft .. viel Glück!

53
Jose Browne

Die Breite der Container sinkt auf 940 Pixel für Ansichtsfenster mit weniger als 992 Pixel. Wenn Sie wirklich keine Container mit einer Breite von mehr als 940 Pixel wünschen, wechseln Sie zur Seite Bootstrap anpassen und setzen Sie @container-lg-desktop entweder auf @container-desktop oder auf fest codierte 940px.

2
Martin Bean

Der .navbar-static-top, den Sie verwenden, erzwingt, dass Ihre navbar die volle Breite erhält. Entfernen Sie diese Klasse, und Sie erhalten eine navbar-Größe. Dann können Sie es in einen span# der gewünschten Größe einwickeln.

<div class="container">
<div class="row">
    <div class="span6 offset3">
        <div class="navbar">
            ...
        </div>
    </div>
</div>

1
Lawrence Oputa

Hallo diese Arbeit versuchst du! in Ihrem Fall ist .navbar-fixed-top {}

.navbar-fixed-bottom{
    width:1200px;
    left:20%;
}
1
Laed

Wenn Sie mit einer dynamischeren Bildschirmauflösung/-größe arbeiten, können Sie die Größe in Pixel anstelle des Festcodierens in einem bestimmten Prozentsatz der Medienbreite ändern

@media (min-width: 1200px) {
    .container{
        max-width: 70%;
   }
}
0
Akshar

Richtig ist es, wenn Sie hier die Breite im Online-Customizer ändern:

http://getbootstrap.com/customize/

laden Sie die neu kompilierte Quelle herunter, überschreiben Sie das vorhandene Bootstrap-Verzeichnis und laden Sie sie erneut (beachten Sie den Browser-Cache !!!).

Alle Ihre Änderungen werden in der .json-Konfigurationsdatei gespeichert

Um die Änderungen erneut zu übernehmen, laden Sie einfach die Json-Datei hoch und Sie können loslegen

0

nur einfach:

.navbar{
    width:65% !important;
    margin:0px auto;
    left:0;
    right:0;
    padding:0;
}

oder,

.navbar.navbar-fixed-top{
    width:65% !important;
    margin:0px auto;
    left:0;
    right:0;
    padding:0;
}

Hoffe es funktioniert (zumindest für zukünftige Suchende)

0
Herman Nz