Wie zu stoppen diese zwei divs/navbars aus überdeckung in der Bootstrap

Ich habe diese Seite, dass sollte segmentiert werden. Mit Bootstrap, es gibt eine Seite-block col-sm-3 für die sidebar, und ein body-block col-sm-9 für die wichtigsten Inhalte. Ich dachte, wenn alles Hinzugefügt, bis zu 12 Spalten, alles wäre OK, aber wenn ich die Eingabe eines Navigations-div, was in der sideblock, scheint es einfach zu ignorieren, das ganze grid-system und drückt den Körper blockieren nach unten, und hinterlässt einen großen leeren Raum vor der Seitenleiste.

Ich bin noch ziemlich neu für alle dies und habe nicht gelernt, wie man richtig mit css. Ich benutzte das bootstrap-CDN-wenn das zählt. Ist es irgendwie macht der Seitenleiste und dem Hauptinhalt teilen der gleichen Zeile verwenden einfach die bootstrap-CDN? Wenn nicht, wie würde ich gehen, um zu implementieren, die css richtig in diesem Fall?

Den block von html gibt mir Probleme:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      {% block side_block %}
        {% get_category_list category %}
      {% endblock %}
    </div>
    <div class="col-sm-9 col-sm-offset-3">
      <div>
        {% block body %}{% endblock %}
      </div>
    </div>
  </div>
</div>

ist und der block von code gerendert {% get_category_list Kategorie %}:

{% if cats %}
  <ul class="nav navbar-sidebar">
  {% for c in cats %}
    {% if c == act_cat %}<li class="active"> {% else %} <li>{% endif %}
    <a href="{% url 'category' c.slug %}">{{ c.name }}</a></li>
  {% endfor %}
{% else %}
  <li><strong>There are no categories present.</strong></li>
  </ul>
{% endif %}
InformationsquelleAutor Kyle Truong | 2015-09-17
  1. 2

    Es ist ein bisschen schwierig zu sagen, was Ihr Problem ist einfach, indem Sie suchen, aber hier sind ein paar Vorschläge:

    1. Überprüfen Sie Ihre Polsterung, wenn Sie alle benutzerdefinierten Polsterung Hinzugefügt grid-Elemente, stellen Sie sicher, um die Eigenschaft hinzufügen (box-sizing: border-box), um diejenigen, die machen sicher, dass die Größe des Elements wird nicht wachsen mit Polsterung. Versuchen Sie, um zu überprüfen, dass auf Ihrem nav-element als auch.
    2. Versuchen, Sie zu entfernen (col-sm-offset-3), und stattdessen wickeln Sie die zwei Elemente, die oben in einer Zeile und einer (col-sm-12), wodurch sichergestellt wird, dass Sie beide sitzen in 12 Spalten, die vielleicht auch Ihnen helfen, herauszufinden, was passiert.

    Dieser Eigenschaft kann dazu führen, dass einige Fehler, und ich würde nicht empfehlen es für die eigentliche Entwicklung, aber es könnte helfen, etwas Licht, wenn das Problem tatsächlich im Zusammenhang Polsterung:

    in der css, die Sie tun können, so etwas wie:

    html,html *{box-sizing: border-box !important;}

    Selbst wenn das funktioniert und das Problem löst, entfernen Sie es bitte und gehen Sie zum anwenden der box-sizing-Eigenschaft, um den betroffenen divs und nicht nur html und es sind Kinder da ist es nicht empfohlen, verwenden Sie eine syntax wie diese.

    • Spot an, danke für die Hilfe! Habe versucht Vorschlag #2 und es funktionierte perfekt.
    InformationsquelleAutor Mo Alsaedi
  2. 1

    Das Problem auftreten, da Sie Klassen, beginnend mit .col-sm... Klassen, beginnend mit dieser bleibt die Gitter, bis die viewport-Breite kleiner als 768px, dann wird es wieder eine ein-Spalten-Struktur.

    Wenn Sie nicht möchten, dass das raster, bis ein kleiner viewport, versuchen Sie, die Klassen beginnen mit .col-xs... zum Beispiel:

    .col-xs-3

    https://jsfiddle.net/20jhf966/

    Sich auch, einen Blick durch den Bootstrap docs für Lasten mehr helfen, es ist sehr gut dokumentiert:

    http://getbootstrap.com/css/#grid-options

    InformationsquelleAutor Alvin Pascoe
  3. 1

    Dein problem ist, dass Sie mit offset. Sie brauchen nicht ausgeglichen. Sehen Sie diese JSFIDDLE.

    Also im Grunde genommen tun Sie waren 3(für die Seitenleiste)+3(offset)+9(für main), die größer ist als 12. Wenn Sie entfernen Sie die offset -, bootstrap -, wird natürlich legen Sie Ihre div-neben der Seitenleiste und Ihre insgesamt 12.

    Nur der Vollständigkeit halber, Ihre aktualisierten code:

    <div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 sidebar">
      This is the sidebar
    </div>
    <div class="col-sm-9 main">
      <div>
        This is the main body
      </div>
    </div>
  </div>
</div>
    InformationsquelleAutor Rash
Schreibe einen Kommentar