Ankündigung

Einklappen
Keine Ankündigung bisher.

Bootstrap 4: container-fluid und padding

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Bootstrap 4: container-fluid und padding

    Laut der Bootstrap 4 - Dokumentation kann man ein Grid-Layout mit der Klasse .container-fluid auf die volle Bildschirmbreite ziehen. Leider erzeugt dies auch links&rechts jeweils einen Einzug (padding) von 15px. Im Netz wird empfohlen, dem container - Element auch noch die Klasse .p-0 zu geben, um das padding zu entfernen. Doch das erzeugt dann wiederum eine horizontale Scroll-Leiste.

    Ich habe bisher keine Lösung hierfür gefunden. Es geht mir dabei nicht darum, die Abstände zwischen den Spalten (gutter) zu entfernen oder dergleichen. Die Seite soll sich einfach von einem Ende des Browserfensters bis zum anderen aufziehen. Vielleicht weiß hier jemand mehr darüber?


  • #2
    horizontale scrollleisten wenn du links und rechts das padding entfernen tust?
    wie hast du das gemacht ?
    padding:0px; ?
    versuch mal

    .p-0{
    padding-left:0px;
    padding-right:0px;
    }

    ansonsten müsstest du mal dein Code posten

    Kommentar


    • #3
      Die Scrolleisten erscheinen weil die colums dann wieder ein negatives margin von 15 px haben damit es passt. Durch das negative margin und padding 0 im container fluid, wird der Inhalt grösser als die Darstellung es zulässt.
      Warum muss man eigentlich bei so was auf bootstrap zurückgreifen, wenn man die Spalten nicht anwendet?

      Kommentar


      • #4
        Warum muss man eigentlich bei so was auf bootstrap zurückgreifen, wenn man die Spalten nicht anwendet?
        Warum nutzt man sowieso Bootstrap. Ich mag weder Bootstrap noch Twig etc. Das macht für mich alles nur komplizierter.

        Kommentar


        • #5
          Wenn das negative margin ein Problem ist, kannst du auch noch die Klasse m-0 hinzufügen, damit wird auch alles an margin auf 0 gesetzt

          Edit: So sind die abstände entfernt:

          HTML-Code:
          <div class="container-fluid bg-primary p-0">
              <div class="row mx-0">
                  <div class="col p-0 bg-white">
                      1
                  </div>
                  <div class="col p-0 bg-secondary">
                      2
              </div>
          </div>
          Zitat von strub Beitrag anzeigen

          Warum nutzt man sowieso Bootstrap. Ich mag weder Bootstrap noch Twig etc. Das macht für mich alles nur komplizierter.
          Klar kann man auch alles selber machen für weniger Qualität und vielfachen Aufwand, aber schneller gehts definitiv mit fertigen Sachen. Wobei dort die komplexität wesentlich geringer ist als sich in Flexbox, MediaQueries und was weiß ich alles selber einzuarbeiten und das auch noch korrekt zu implementieren.

          Kommentar


          • #6
            Zitat von Funfare Beitrag anzeigen
            Klar kann man auch alles selber machen für weniger Qualität und vielfachen Aufwand, aber schneller gehts definitiv mit fertigen Sachen. Wobei dort die komplexität wesentlich geringer ist als sich in Flexbox, MediaQueries und was weiß ich alles selber einzuarbeiten und das auch noch korrekt zu implementieren.
            Idealerweise versteht man wie diese Techniken funktionieren, sonst steht man beim kleinsten Problem da und weiß nicht weiter - da hilft dann auch das Framework nix mehr

            Dirty fix: overflow: hidden; auf den Container. Ansonsten wirst du wohl ein Beispiel bei jsfiddle erstellen müssen, damit man sich das mal ansehen kann.

            Kommentar


            • #7
              Hier ist ein Beispiel aus der Bootstrap 4 Dokumentation. Wenn man sich das CSS mit den Developertools ansieht, wird es deutlich wie die Entwickler das umgesetzt haben. .

              Kommentar


              • #8
                Hier das Problem: https://jsfiddle.net/kek6h2b5/2/

                Zitat von protestix Beitrag anzeigen
                Hier ist ein Beispiel aus der Bootstrap 4 Dokumentation. Wenn man sich das CSS mit den Developertools ansieht, wird es deutlich wie die Entwickler das umgesetzt haben. .
                Die "Lösung" ist dort einfach, dass der Inhalt eben das horizontale Padding besitzt (weswegen sie es auch auf 0 setzen müssen), während die Titelleiste, die volle Breite hat, nicht im Bootstrap Grid sitzt. So gesehen weiß ich jetzt nicht, wo uns das bei bestehendem Problem weiterhilft.

                Die einzige schnelle Behebung ist derzeit
                HTML-Code:
                overflow: hidden
                .


                Zitat von Funfare Beitrag anzeigen
                Wenn das negative margin ein Problem ist, kannst du auch noch die Klasse m-0 hinzufügen, damit wird auch alles an margin auf 0 gesetzt

                Edit: So sind die abstände entfernt:

                HTML-Code:
                <div class="container-fluid bg-primary p-0">
                <div class="row mx-0">
                <div class="col p-0 bg-white">
                1
                </div>
                <div class="col p-0 bg-secondary">
                2
                </div>
                </div>
                Das Problem ist, dass du hier auch den Abstand zwischen den Spalten entfernst.

                Kommentar


                • #9
                  Zitat von paddelboot Beitrag anzeigen
                  So gesehen weiß ich jetzt nicht, wo uns das bei bestehendem Problem weiterhilft.
                  Wieso uns?
                  Ich habe damit kein Problem und nutze auch kein Bootstrap, habe nur mal netterweise für dich nachgesehen.

                  Zitat von paddelboot Beitrag anzeigen
                  Die einzige schnelle Lösung ist derzeit
                  HTML-Code:
                  overflow: hidden
                  ..
                  Davon würde ich absehen.

                  Warum Überhaupt Bootstrap?


                  Kommentar


                  • #10
                    Zitat von protestix Beitrag anzeigen


                    Warum Überhaupt Bootstrap?

                    Weil der Kunde es vorschreibt. Ich will jetzt auch nicht unbedingt meine komplette Entwicklungsumgebung hinterfragen, nur weil bei bei einem Layout 30px Rand auftauchen.

                    Kommentar


                    • #11
                      Dann entferne das Padding in fluid_container und das margin in row. Sagt ja keiner das du im CSS nichts ändern darfst.

                      Kommentar


                      • #12
                        Nimm's mir nicht übel, aber wenn du nichts zu sagen hast zu einem Thema, dann schreib doch einfach nichts. Weder dein Link noch dein letzter Hinweis tragen irgendetwas bei zur Lösung.

                        Kommentar


                        • #13
                          Dann schau halt selbst, geändert ist
                          HTML-Code:
                          .col, .container-fluid, .row{padding:0; margin:0;}
                          https://jsfiddle.net/kek6h2b5/5/

                          Kommentar

                          Lädt...
                          X