Net 3.1 gedownload en gevonden in de documenten…
Verander elke rasterlay-out met vaste breedte in een lay-out op volledige breedte door uw buitenste
.containerte wijzigen in.container-fluid.
Kijkend in bootstrap.css, blijkt dat .container-fluididentiek is aan .container. Beide hebben dezelfde CSS en elke instantie van .container-fluidis gekoppeld aan .container, en alle kolomklassen worden gespecificeerd in percentages.
Toen ik met voorbeelden aan het prutsen was, kon ik geen verschil zien, omdat alles vloeiend leek.
Omdat ik nieuw ben bij Bootstrap, neem ik aan dat ik iets over het hoofd zie. Zou iemand even de tijd kunnen nemen om mij in te lichten?
Antwoord 1, autoriteit 100%
Snelle versie:.containerheeft één vaste breedte voor elke schermgrootte in bootstrap (xs,sm,md,lg); .container-fluidwordt uitgevouwen om de beschikbare breedte te vullen.
Het verschil tussen containeren container-fluidkomt van deze CSS-regels:
@media (min-width: 568px) {
.container {
width: 550px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
Afhankelijk van de breedte van de viewport waarop de webpagina wordt bekeken, geeft de klasse containerzijn div een specifieke vaste breedte. Deze regels bestaan in geen enkele vorm voor container-fluid, dus de breedte verandert elke keer dat de breedte van de viewport verandert.
Zeg bijvoorbeeld dat uw browservenster 1000px breed is. Omdat het groter is dan de min-breedte van 992px, heeft uw .container-element een breedte van 970px. Verdient dan langzaam uw browservenster. De breedte van uw .containerzal niet veranderen totdat u bij 1200px komt, waarbij deze naar 1170PX wijd springt en op die manier blijft voor een grotere browserbreedten.
Uw .container-fluidelement, aan de andere kant, zal het formaat van de grootte wijzigen terwijl u zelfs de kleinste wijzigingen in uw browserbreedte maakt.
Antwoord 2, Autoriteit 25%
Ik denk dat je zegt dat een containervs container-fluidhet verschil is tussen responsief en niet-reagerend op het raster. Dit is niet waar … Wat zegt dat de breedte niet is opgelost … de volledige breedte!
Dit is moeilijk uit te leggen, dus laten we kijken naar de voorbeelden
Voorbeeld één
container-fluid:
Dus je ziet hoe de container het hele scherm in beslag neemt … dat is een container-fluid.
Laten we nu naar de andere gewoon een normaal containerkijken en de randen van het voorbeeld
bekijken
Voorbeeld twee
container
Zie je nu de witte ruimte in het voorbeeld? Dat komt omdat het een vaste breedte container! Het kan zinvol zijn om beide voorbeelden in twee verschillende tabbladen te openen en heen en weer te schakelen.
bewerken
Beter nog hier is een voorbeeld met beide containers tegelijk! Nu kun je het verschil echt vertellen!
Ik hoop dat dit een beetje heeft geholpen!
Antwoord 3, autoriteit 24%
Zowel .containerals .container-fluidzijn responsief (dwz ze veranderen de lay-out op basis van de schermbreedte), maar op verschillende manieren (ik weet het, de naamgeving laat het niet zo klinken).
Kort antwoord:
.containeris springerig / schokkerig formaat wijzigen, en
.container-fluidis continu / fijn formaat wijzigen op breedte: 100%.
Vanuit een functionaliteitsperspectief:
.container-fluidpast zich voortdurend aan als u de breedte van uw venster/browser met een willekeurige hoeveelheid wijzigt, waardoor er nooit extra lege ruimte aan de zijkanten overblijft, in tegenstelling tot hoe .containerdoet. (Vandaar de naamgeving: “vloeibaar” in tegenstelling tot “digitaal”, “discreet”, “chunked” of “gekwantiseerd”).
.containerverkleint de grootte in brokken op verschillende bepaalde breedtes. Met andere woorden, het zullen verschillende specifieke, ook wel “vaste” breedtes genoemd, verschillende reeksen schermbreedtes zijn.
Semantiek: “vaste breedte”
Je kunt zien hoe naamsverwarring kan ontstaan. Technisch gezien kunnen we zeggen dat .container“vaste breedte” is, maar het is alleen vast in die zin dat het niet bij elke granulaire breedte van grootte verandert. Het is eigenlijk niet “vast” in de zin dat het altijd op een specifieke pixelbreedte blijft, omdat het van grootte kan veranderen.
Vanuit een fundamenteel perspectief:
.container-fluidheeft de CSS-eigenschap width: 100%;, dus het past zich voortdurend aan bij elke granulariteit van de schermbreedte.
.container-fluid {
width: 100%;
}
.containerheeft zoiets als “breedte = 800px” (of EM, REM etc.), een specifieke pixelbreedtewaarde op verschillende schermbreedtes. Dit is natuurlijk wat de elementbreedte veroorzaakt om abrupt naar een andere breedte te gaan wanneer de schermbreedte een schermbreedte-drempel overschrijdt. En die drempel wordt beheerst door CSS3-mediacy-query’s, waarmee u verschillende stijlen voor verschillende omstandigheden toepassen, zoals schermbreedtes.
@media screen and (max-width: 400px){
.container {
width: 123px;
}
}
@media screen and (min-width: 401px) and (max-width: 800px){
.container {
width: 456px;
}
}
@media screen and (min-width: 801px){
.container {
width: 789px;
}
}
Beyond
U kunt een vaste breedte-element reageren via media-query’s, niet alleen .containerelementen, aangezien media-query’s precies zijn hoe .containerwordt geïmplementeerd door bootstrap op de achtergrond (zie het antwoord van JKillian voor de code).
Antwoord 4, Autoriteit 4%
Gebruik .container-fluidWanneer u uw pagina wilt op Shapeshift met elk klein verschil in de grootte van de viewport.
Gebruik .containerwanneer u uw pagina wilt op Shapeshift tot slechts 4 soorten maten , die ook bekend staan als “breakpoints”.
De breekpunten die overeenkomen met hun formaten zijn:
- extra klein: (alleen mobiele resolutie)
- klein: 768px (tabletten)
- Medium: 992px (laptops)
- Large: 1200px (laptops / desktops)
Antwoord 5, Autoriteit 2%
Bijgewerkt 2019
Het fundamentele verschil is dat containerresponsief schaalt, terwijl container-fluidaltijd width:100%is. Daarom zien ze er in de basis-CSS-definities hetzelfde uit, maar als je verder kijkt, zie je dat .containergebonden is aan mediaquery’s.
Bootstrap 4
De containerheeft 5 breedtes…
.container {
width: 100%;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
Bootstrap 3
De containerheeft 4 formaten. Volledige breedte op xs-schermen, en dan varieert de breedte op basis van de volgende mediaquery’s..
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
container vs. container-vloeistof demo
Antwoord 6
.containerheeft een maximale pixelwaarde voor de breedte, terwijl .container-fluideen maximale breedte van 100% is.
.container-fluidwordt voortdurend van grootte aangepast als u de breedte van uw venster/browser met een willekeurige hoeveelheid wijzigt.
.containerVormt in brokken op verschillende zekere breedtes, gecontroleerd door media-query’s (technisch gezien kunnen we zeggen dat het “vaste breedte” is
Omdat de waarden van pixels worden opgegeven, maar als u daar stopt, kunnen mensen de
indruk dat het niet kan veranderen – d.w.z. niet reageren.)
Antwoord 7
Vanuit een weergaveperspectief .containergeeft u meer controle over de wat de gebruikers zien, en maakt het gemakkelijker om te zien wat de gebruikers zullen zien zoals u slechts 4 variaties van display hebt (5 in het geval van bootstrap 5) omdat de maten betrekking hebben op hetzelfde als de rastermaten. b.v. .col-xs, .col-sm, .col, EN .col-lg.
Wat dit betekent, is dat wanneer u gebruikerstests uitvoert als u test op een displays met de 4 verschillende maten die u alle verdere display ziet.
Bij gebruik van .container-fluidOmdat de Witthh gerelateerd is aan de viewportbreedte is het display dynamisch, zodat de variaties veel groter zijn en gebruikers met zeer grote schermen of ongewone schermbreedtes die u kunt zien waren niet verwacht.
Antwoord 8
U hebt gelijk in 3.1 .Container-fluid en .Container zijn hetzelfde en werkt als container, maar als u ze verwijdert, werkt het als .Container-fluïdum (volledige breedte). Ze hadden. Container-vloeistof verwijderd voor “Mobile First Apackies”, maar nu is het terug in 3.3.4 (en ze zullen anders werken)
Lees het nieuwste bootstrap om dit bericht op Stackoverflow te lezen, het helpt Check it out .