Bootstrap 3 i 4. Kontener-fluid z siatką dodającą niechcianego wypełnienia

Chciałbym, aby moja treść była płynna, ale podczas korzystania .container-fluidz siatki Bootstrap nadal widzę wypełnienie. Jak pozbyć się wypełnienia?

Widzę, że nie dostaję wypełnienia z .row, ale chcę dodać kolumny, a gdy tylko to zrobię, wypełnienie powróci: O.

Chcę móc używać kolumn o pełnej szerokości.

Przykład:

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
</div>

Rozwiązanie, które otrzymałem:

Zastąp bootstrap.css, linke 1427 i 1428 (wersja 3.2.0)

padding-right: 15px;
padding-left: 15px;

do

padding-right: 0px;
padding-left: 0px;

Powinieneś także dodać „wiersz” do każdego kontenera, który „naprawi” ten problem!

<div class="container-fluid">
   <div class="row">
        Some text
   </div>
</div>

Widzieć http://jsfiddle.net/3px20h6t/

Znajdź aktualny plik css z Bootstrap

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}

Kiedy dodajesz .container-fluidklasę, dodaje ona poziome wypełnienie 15px i to samo zostanie usunięte, gdy dodasz .rowklasę jako element potomny przez ujemny margines ustawiony w wierszu.

Minęło 5 lat i to dość dziwne, że jest tam tak wiele odpowiedzi, które nie przestrzegają (lub są przeciw) regułom bootstrap lub nie odpowiadają na pytanie ...

Krótka odpowiedź:
Po prostu użyj no-guttersklasy Bootstrap w swoim rzędzie, aby usunąć wypełnienie:

  <div class="container-fluid">
    <div class="row no-gutters">
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
    </div>
  </div>

(Zapomniałeś też dodać coś </div>na końcu pliku. Poprawiono to również w powyższym kodzie)

Uwaga:

Zdarzają się przypadki, gdy chcesz usunąć wypełnienie samego pojemnika. W takim przypadku rozważ porzucenie .containerlub .container-fluidklasy zgodnie z zaleceniami w dokumentacji .

<!--<div class="container-fluid">-->
<div class="row no-gutters">
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
</div>
<!--</div>-->

Długa odpowiedź:

Na Uszczelki Ci faktycznie udokumentowane w Bootstrap w dokumentacji :

Wiersze są opakowaniami dla kolumn. Każda kolumna ma poziomą wyściółkę (zwaną rynną) do kontrolowania odległości między nimi. To wypełnienie jest następnie równoważone w wierszach z ujemnymi marginesami. W ten sposób cała zawartość Twoich kolumn jest wizualnie wyrównana do lewej strony.

I o rozwiązaniu, które również zostało udokumentowane:

Kolumny mają dopełnienie poziome, aby utworzyć odstępy między poszczególnymi kolumnami, jednak można usunąć marginesy z wierszy i wypełnienie z kolumn z .no- gutters na .row.

Odnośnie upuszczenia pojemnika:

Potrzebujesz projektu od krawędzi do krawędzi? Usuń nadrzędny .container lub .container-fluid.

Bonus: O błędach znalezionych w innych odpowiedziach

• Unikaj hakowania klas kontenerów bootstrap zamiast upewniać się, że umieściłeś całą zawartość w col-s i opakowałeś ją w row-s, jak mówi dokumentacja :

W układzie siatki zawartość musi być umieszczona w kolumnach i tylko kolumny mogą być bezpośrednimi elementami podrzędnymi wierszy.

• Jeśli nadal musisz zhakować (na wypadek, gdyby ktoś już coś zepsuł i musisz szybko naprawić problem), rozważ użycie Bootstrap px-0do usuwania poziomych wyściółek pl-0 pr-0lub ponownego wynalezienia stylów.

Myślę, że miałem te same wymagania co Tim, ale żadna z odpowiedzi nie przewiduje rozwiązania typu „rzutnia od krawędzi do krawędzi z normalnymi wewnętrznymi rynnami”. Albo inaczej: jak mogę sprawić, by moja pierwsza i ostatnia kolumna włamała się do wypełnienia kontenera i przepłynęła do krawędzi rzutni, jednocześnie zachowując normalne odstępy między kolumnami.

Z tego co wiem, nie ma schludnego i czystego rozwiązania. To właśnie działa w moim przypadku, ale wykracza poza wszystko, co byłoby obsługiwane przez Bootstrap. Ale na razie działa (Bootstrap 3.3.5 i 4.0-alpha).

http://www.bootply.com/ioWBaljBAd

Przykładowy kod HTML:

<div class="container">
  <div class="row full-width-row">
    <div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
    </div>
  </div>
</div>

CSS:

.full-width-row {
  overflow-x: hidden;
}

.full-width-row > div {
  margin-left: -15px;
  margin-right: -15px;
}

Sztuczka polega na zagnieżdżeniu divmiędzy wierszem a kolumnami w celu wygenerowania dodatkowego marginesu -15 pikseli, który zostanie wciśnięty w wypełnienie kontenera. Dodatkowy ujemny margines tworzy poziome przewijanie (do białych znaków) na małych rzutniach. Dodawanie overflow-x: hiddendo.row jest wymagane, aby go stłumić.

Działa to tak samo .container-fluidjak .container.

Oto krótkie podsumowanie Bootstrap 4:

<div class="container-fluid px-0">
  <div class="row no-gutters">
    <div class="col-12">          //any cols you need
        ...
    </div>
  </div>
</div>

Mi to pasuje.

Dlaczego nie zanegować dopełnienia dodanego przez pojemnik-fluid , oznaczając lewe i prawe wypełnienie jako 0?

<div class="container-fluid pl-0 pr-0">

jeszcze lepszy sposób? brak wypełnienia na poziomie pojemnika (środek czyszczący)

<div class="container-fluid pl-0 pr-0">

Potrzebujesz tylko tych właściwości CSS w klasie .container w Bootstrapie i możesz umieścić w nim normalny system grid bez kogoś, kto zawartość kontenera będzie poza nim (bez scroll-x w widoku).

HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            Your content here!
            ...    
        </div>
    </div>
    ... more rows
</div>

CSS:

/* Bootstrap custom */
.container{
    padding-left: 0rem;
    padding-right: 0rem;
    overflow: hidden;
}

W nowych wersjach alfa wprowadzili klasy użytkowe odstępów . Strukturę można następnie zmodyfikować, jeśli użyjesz ich w sprytny sposób.

Rozmieszczanie klas użytkowych

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-md-3 pl-0">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3 pr-0">…</div>
    </div>
</div>

pl-0i pr-0usunie początkowe i końcowe dopełnienie z kolumn. Pozostała tylko kwestia osadzonych wierszy kolumny, ponieważ nadal mają one ujemny margines. W tym przypadku:

<div class="col-sm-12 col-md-6 pl-0">
    <div class="row ml-0">
</div>

Różnice wersji

Należy również zauważyć, że klasy odstępów między narzędziami zostały zmienione od wersji 4.0.0-alpha.4. Zanim zostały one oddzielone myślnikami np 2 => p-x-0a p-l-0i tak dalej ...

Aby pozostać na temat wersji 3: To jest to, czego używam w projektach Bootstrap 3 i dołączam konfigurację kompasu, dla tego konkretnego narzędzia do rozmieszczania odstępów, do bootstrap-sass(wersja 3) lub bootstrap(wersja 4.0.0-alpha.3) z podwójnymi myślnikami lub bootstrap(wersja 4.0.0-alpha.4 i nowsze) z pojedynczymi myślnikami.

Ponadto najnowsze wersje zwiększają się do 5 razy (np. 5-krotność pt-5dopełnienia) zamiast tylko 3.

Kompas

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

@import "../scss/mixins/breakpoints"; // media-breakpoint-up, breakpoint-infix
@import "../scss/utilities/_spacing.scss";

Wyjście CSS

Oczywiście możesz zawsze kopiować / wklejać klasy z odstępami dopełnienia tylko z wygenerowanego pliku css.

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pl-1 { padding-left: 0.25rem !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

Myślę, że nikt nie udzielił poprawnej odpowiedzi na to pytanie. Moje rozwiązanie robocze to: 1. Po prostu zadeklaruj inną klasę wraz z przykładem klasy container-fluid (.maxx):

 <div class="container-fluid maxx">
   <div class="row">
     <div class="col-sm-12">
     <p>Hello</p>
     </div>
   </div>
  </div>

2. Następnie używając specyficzności w części css wykonaj następujące czynności:

.container-fluid.maxx {
  padding-left: 0px;
  padding-right: 0px; }

To zadziała w 100% i usunie wyściółkę z lewej i prawej strony. Mam nadzieję, że to pomoże.

Jeśli pracujesz z konfiguratorem, możesz ustawić @grid-gutter-widthod 30pxdo0

Użyłem <div class="container-fluid" style="padding: 0px !important"> i wydaje się, że działa.

Sam się z tym zmagałem i wreszcie wierzę, że to rozgryzłem. To niesamowite, jak wiele nieudanych odpowiedzi na to pytanie

Wszystko, co musisz zrobić, to usunąć wypełnienie ze wszystkich elementów .col i usunąć wypełnienie również z .container-fluid.

Zrobiłem to w moim własnym projekcie trochę niechlujnie, dodając do mojego pliku css:

.col, col-10, col-12, col-2, col-6 {
    padding: 0!important;
}

.container-fluid {
    padding: 0!important;
}

Mam po prostu różne rozmiary col, aby uwzględnić wszystkie różne rozmiary col, których używam. Jestem przekonany, że istnieje bardziej przejrzysty sposób pisania CSS, ale to ilustruje efekt końcowy.

Używaj px-0na containeri no-guttersnarow aby usunąć wyściółkę.

Cytat z Bootstrap 4 - system Grid :

Wiersze są opakowaniami dla kolumn. Każda kolumna ma poziomą wyściółkę (zwaną rynną) do kontrolowania odległości między nimi. To wypełnienie jest następnie równoważone w wierszach z ujemnymi marginesami. W ten sposób cała zawartość Twoich kolumn jest wizualnie wyrównana do lewej strony.

Kolumny mają dopełnienie poziome, aby utworzyć odstępy między poszczególnymi kolumnami, jednak można usunąć marginesy z wierszy i wypełnienie z kolumn za .no-gutterspomocą elementu .row.

Poniżej znajduje się demonstracja na żywo:

h1 {
  background-color: tomato;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<div class="container-fluid" id="div1">
  <div class="row">
    <div class="col">
        <h1>With padding : (</h1>
    </div>
  </div>
</div>

<div class="container-fluid px-0" id="div1">
  <div class="row no-gutters">
    <div class="col">
        <h1>No padding : > </h1>
    </div>
  </div>
</div>

Powodem, dla którego to działa, jest to container-fluidi coloba mają następujące wypełnienie:

padding-right: 15px;
padding-left: 15px;

px-0może usunąć poziomą wyściółkę z container-fluidi no-guttersmoże usunąć wyściółkę z col.