Ik heb twee kolommen:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
Hoe kan ik een spatie ertussen toevoegen?
De uitvoer zou simpelweg twee kolommen naast elkaar zijn die de hele breedte van de pagina in beslag nemen. Stel dat de breedte was ingesteld op 1000px, dan zou elke div 500pxbreed zijn.
Als ik een ruimte van 100pxtussen de twee wilde, hoe kon ik dit dan automatisch bereiken met Bootstrap: de grootte van de divzou elk 450pxworden om de tussenruimte te compenseren.
Antwoord 1, autoriteit 100%
Je kunt afstand tussen kolommen bereiken met behulp van de col-md-offset-*klassen, hier gedocumenteerd. De spatiëring is consistent, zodat al uw kolommen correct worden uitgelijnd. Om gelijkmatige spatiëring en kolomgrootte te krijgen, zou ik het volgende doen:
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5 col-md-offset-2"></div>
</div>
Gebruik in Bootstrap 4: offset-2of offset-md-2
Antwoord 2, autoriteit 99%
Ik had hetzelfde probleem; en het volgende werkte goed voor mij. Ik hoop dat dit iemand helpt die hier landt:
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
Some Content..
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
Some Second Content..
</div>
</div>
</div>
Hierdoor wordt automatisch wat ruimte tussen de 2 div’s weergegeven.
Antwoord 3, autoriteit 43%
Ik weet dat ik te laat op het feest ben, maar je zou kunnen proberen de vakken met opvulling te plaatsen.
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
CSS:
.box {
padding: 0 5px 0 5px;
}
.box .inner {
background-color: #fff;
}
Probeer het maar
Antwoord 4, autoriteit 12%
je kunt background-clip en box-model gebruiken met borderproprety
.box{
box-sizing: border-box;
border: 3px solid transparent;
background-clip:padding-box;
}
<div class="row">
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
</div>
Antwoord 5, autoriteit 7%
Ik heb soortgelijke problemen gehad met de ruimte tussen kolommen. Het hoofdprobleem is dat kolommen in bootstrap 3 en 4 opvulling gebruiken in plaats van marge. Dus achtergrondkleuren voor twee aangrenzende kolommen raken elkaar.
Ik heb een oplossing gevonden die bij ons probleem past en die hoogstwaarschijnlijk zal werken voor de meeste mensen die kolommen willen plaatsen en dezelfde gootbreedtes willen behouden als de rest van het rastersysteem.
Dit was het eindresultaat waar we voor gingen
Het was problematisch om de opening met een slagschaduw tussen kolommen te hebben. We wilden geen extra ruimte tussen kolommen. We wilden alleen dat de dakgoten “transparant” zouden zijn, zodat de achtergrondkleur van de site tussen twee witte kolommen zou verschijnen.
dit is de opmaak voor de twee kolommen
<div class="row">
<div class="col-sm-7">
<div class="raised-block">
<h3>Facebook</h3>
</div>
</div>
<div class="col-sm-5">
<div class="raised-block">
<h3>Tweets</h3>
</div>
</div>
</div>
CSS
.raised-block {
background-color: #fff;
margin-bottom: 10px;
margin-left: 0;
margin-right: -0.625rem; // for us 0.625rem == 10px
padding-left: 0.625rem;
padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
.raised-block {
margin-left: -0.625rem;
}
}
.row [class^="col-"]:first-child>.raised-block {
// this is so the first column has no margin so it will not be "indented"
margin-left: -0.625rem;
}
Deze benadering vereist een inner div met negatieve marges, net zoals de “row” class bootstrap gebruikt. En deze div, we noemden het “raised-block”, moet de directe broer of zus van een kolom zijn
Op deze manier krijgt u nog steeds de juiste opvulling in uw kolommen. Ik heb oplossingen gezien die lijken te werken door ruimte te creëren, maar helaas hebben de kolommen die ze maken extra opvulling aan weerszijden van de rij, zodat de rij dunner wordt waarvoor de rasterlay-out is ontworpen. Als je naar de afbeelding kijkt voor de gewenste look, zou dit betekenen dat de twee kolommen samen kleiner zouden zijn dan de grotere bovenaan, wat de natuurlijke structuur van het raster doorbreekt.
Het grootste nadeel van deze aanpak is dat er extra opmaak nodig is om de inhoud van elke kolom te verpakken. Voor ons werkt dit omdat alleen specifieke kolommen ruimte nodig hadden om de gewenste look te bereiken.
Antwoord 6, autoriteit 6%
Hierdoor is er ruimte tussen de twee kolommen en als u de standaardbreedte wilt wijzigen, kunt u natuurlijk voor mixins gaan om de standaard bootstrap-breedte aan te passen. Of u kunt de breedte opgeven met behulp van de inline CSS-stijl.
<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>
Antwoord 7, autoriteit 6%
Volgens Bootstrap 4 documentatiemoet u de ouder een negatieve marge geven mx-n*, en de kinderen een positieve padding px-*
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row mx-n5">
<div class="col px-5">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col px-5">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>Antwoord 8, autoriteit 5%
Je kunt afstand tussen kolommen bereiken met behulp van de col-xs-* klassen, binnen in een col-xs-* div die hieronder is gecodeerd. De spatiëring is consistent, zodat al uw kolommen correct worden uitgelijnd. Om gelijkmatige spatiëring en kolomgrootte te krijgen, zou ik het volgende doen:
<div class="container">
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
</div>
Antwoord 9, autoriteit 3%
Omdat je bootstrapgebruikt, denk ik dat je het ding responsiefwilt maken. Gebruik dan geen vaste formaten, bijvoorbeeld in ‘px’.
Als tijdelijke oplossing voor andere oplossingen, stel ik voor om beide kolommen “col-md-5” te maken in plaats van “col-md-6”, en vervolgens in het bovenliggende element “row” dat de kolommen bevat, de klasse toe te voegen ” rechtvaardigen-inhoud-tussen”, die de vrije ruimte in het midden plaatst, zoals u kunt controleren in het bootstrap-document hier
Deze oplossing is ook geldig voor meer dan twee kolommen, uiteraard door de “col-md-x” aan te passen
hoop dat het helpt 😉
Antwoord 10, autoriteit 2%
Binnen de col-md-?, maak een andere div en plaats een afbeelding in die div, dan kun je zo gemakkelijk opvulling toevoegen.
<div class="row">
<div class="col-md-8">
<div class="thumbnail">
<img src="#"/>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="#"/>
</div>
</div>
</div>
<style>
thumbnail{
padding:4px;
}
</style>
Antwoord 11, autoriteit 2%
Bootstrap 4, bestand custom.scss, je kunt de volgende code toevoegen:
$grid-gutter-width-base: 20px;
$grid-gutter-widths: ( xs: $grid-gutter-width-base,
sm: $grid-gutter-width-base,
md: $grid-gutter-width-base,
lg: $grid-gutter-width-base,
xl: $grid-gutter-width-base
);
standaard $grid-gutter-width-base: 30px;
Antwoord 12
het is simpel .. je moet een effen rand rechts, links naar col-* toevoegen
en het zou moeten werken..:)
het ziet er als volgt uit: http://i.stack.imgur.com/CF5ZV.png
HTML :
<div class="row">
<div class="col-sm-3" id="services_block">
</div>
<div class="col-sm-3" id="services_block">
</div>
<div class="col-sm-3" id="services_block">
</div>
<div class="col-sm-3" id="services_block">
</div>
</div>
CSS :
div#services_block {
height: 355px;
background-color: #33363a;
border-left:3px solid white;
border-right:3px solid white;
}
Antwoord 13
Ik moest uitzoeken hoe ik dit voor 3 kolommen moest doen. Ik wilde de hoeken van de divs afronden en kon de afstand niet laten werken. Ik heb marges gebruikt. In mijn geval dacht ik dat 90% van het scherm zou worden ingevuld door de div’s en 10% voor marges:
html:
<div class="row">
<div id="orange" class="col-md-4">
<h1>Orange Div</h1>
</div>
<div id="green" class="col-md-4">
<h1>Green Div</h1>
</div>
<div id="aqua" class="col-md-4">
<h1>Aqua Div</h1>
</div>
</div>
en CSS:
#orange {
background-color:orange;
border-radius: 30px;
padding: 20px;
margin: 2.5% 2.5% 0 2.5%;
width:30%;
}
#green {
background-color:green;
border-radius: 30px;
padding: 20px;
margin: 2.5% 0 0 0;
width:30%;
}
#aqua {
background-color:#39F;
border-radius: 30px;
padding: 20px;
margin: 2.5% 2.5% 0 2.5%;
width: 30%;
}
Om het formaat correct te maken voor mobiele apparaten, liet ik de CSS de breedte wijzigen van 30% in width:92.5%;onder @media (max-width:1023px)
Antwoord 14
Gebruik de .form-groupklasse van bootstrap. Zoals dit in jouw geval:
<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>
Antwoord 15
Alleen een witte rand rond het wikkelelement
.padding-pls{
border-left: 13px solid white;
border-right: 13px solid white;
}
.row .col-md-6:first-child>.padding-pls {
border-left: 0px solid white;
}
.row .col-md-6:last-child>.padding-pls {
border-right: 0px solid white;
}
en eerste+laatste kind geen rand
<div class="row">
<div class="col-md-6">
<div class="col-md-12 padding-pls">
Keci
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 padding-pls">
Keci
</div>
</div>
</div>
Antwoord 16
Ik weet dat dit bericht een beetje gedateerd is, maar ik kwam hetzelfde probleem tegen. Voorbeeld van mijn html.
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<label asp-for="FirstName" class="control-label"></label>
<input asp-for="FirstName" class="form-control" />
<span asp-validation-for="FirstName" class="text-danger"></span>
</div>
</div>
<div class="col-xs-3">
<div class="form-group">
<label asp-for="LastName" class="control-label"></label>
<input asp-for="LastName" class="form-control" />
<span asp-validation-for="LastName" class="text-danger"></span>
</div>
</div>
</div>
Om ruimte tussen de groepen te maken, overbreng ik de marge van Bootstrap van -15px in mijn site.css-bestand door de negatieve marge te verminderen met 5.
Hier is wat ik deed …
.form-group {
margin-right: -10px;
}
Ik hoop dat dit iemand anders helpt.
Antwoord 17
Ik had een kolom op mobiele en twee kolommen van tabletportret omhoog, met gelijke afstand tussen hen in het midden (ook zonder raster-toegevoegde opvulling in kolommen). Kan worden bereikt met behulp van de spacing-hulpprogramma’s en het weglaten van het nummer in col-md:
<div class="container-fluid px-0">
<div class="row no-gutters">
<div class="col-sm-12 col-md mr-md-3" style="background-color: orange">
<p><strong>Column 1</strong></p>
</div>
<div class="col-sm-12 col-md ml-md-3" style="background-color: orange">
<p><strong>Column 1</strong></p>
</div>
</div>
</div>
Antwoord 18
Bootstrap 4 – Scheid kolommen met geneste rijen.
<div class="container">
<div class="row bg-info p-3">
<!-- left column -->
<div class="col-8 ">
<div class="col-12 bg-light p-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
</div>
</div>
<!-- right column -->
<div class="col-4 ">
<div class="col-12 bg-light p-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
</div>
</div>
</div>
</div>
Antwoord 19
Bootstrap col gebruikt een beetje spaties zowel links als rechts. Ik heb zojuist een blokelement zoals div toegevoegd en een rand voor de verschillen ingesteld. ook het toevoegen van wat extra opvulling of marge in die extra div zal perfect werken..
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<br><br>
<div class="container">
<div class="row">
<div class="col-6 ">
<div class="border border-danger ">
<h2 class="text-center">1</h2>
</div>
</div>
<div class="col-6">
<div class="border border-warning">
<h2 class="text-center">2</h2>
</div>
</div>
</div>
</div>Antwoord 20
Aangezien u Bootstrap gebruikt, is de eigenschap column-gaphandig om te implementeren. W3Schools Column-Gap voor Bootstrap heeft documentatie over hoe dit kan worden gebruikt.
- CSS:
.col-gap {
column-gap: 2rem;
}
En voor de HTML, plaats de klasse (col-gap) in de rij div.
Maar houd er ook rekening mee dat dit de afstand van de col-md-6 (of andere formaten) kan verwerpen, dus om te compenseren, verkleint u de grootte voor elke kolom.
(d.w.z. col-md-6 -> col-md-5, zelfs als er maar 2 kolommen zijn)
- HTML:
//Row
<div class="row col-gap justify-content-center">
//Col 1
<div class="col-md-5 ms-3 card p-5">
<p>Div 1</p>
</div>
//Col 2
<div class="col-md-5 ms-3 card p-5">
<p>Div 2</p>
</div>
</div>
Antwoord 21
Wat dacht je van het toevoegen van een rand in dezelfde kleur als de achtergrond met behulp van css? Ik ben hier nieuw in, dus misschien is er een goede reden om het niet te doen, maar het zag er goed uit toen ik het probeerde.
Antwoord 22
Om een bepaalde afstand tussen kolommen te verkrijgen, moeten we paddinginstellen in de standaardlay-out van Bootstrap.
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
/* Check breakpoint at http://getbootstrap.com/css/#grid-media-queries */
@media (min-width: 992px) {
.space-100-px > .row > .col-md-6:first-child {
padding: 0 50px 0 0; /* The first half of 100px */
}
.space-100-px > .row > .col-md-6:last-child {
padding: 0 0 0 50px; /* The second half of 100px */
}
}
/* The result will be easier to see. */
.space-100-px img {
width: 100%;
height: auto;
}<div class="container-fluid space-100-px">
<div class="row">
<div class="col-md-6">
<img src="https://placehold.it/450x100?text=Left" alt="Left">
</div>
<div class="col-md-6">
<img src="https://placehold.it/450x100?text=Right" alt="Right">
</div>
</div>
</div>Antwoord 23
Dit is handig..
.list-item{
margin-right:-10px;
margin-top:10px;
margin-bottom: 10px;
border: 1px solid #eee;
padding: 0px;
}<div class="col-md-4">
<div class="list-item">
<h2>Your name</h2>
</div>
</div>
<div class="col-md-4">
<div class="list-item"></div>
</div>Antwoord 24
<div class="col-md-12 no_padding header_row"></div>
<div class="second_row">
<div class="col-md-4 box_shadow"></div>
<div class="col-md-8 no_padding_right">
<div class="col-md-12 box_shadow"></div>
</div>
</div>
body{
background:#F0F0F0;
}
.main_holder{
min-height: 600px;
margin-top: 40px;
height: 600px;
}
.box_shadow{
box-shadow: 0 1px 2px rgba(0,0,0,.1);
background: white;
height: auto;
min-height: 500px;
}
.no_padding{
padding: 0px !important;
}
.no_padding_right{
padding-right: 0px !important;
}
.header_row{
height: 60px;
background: #00796B;
-webkit-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
-moz-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
}
.second_row{
position: relative;
width: 100% !important;
top: 20px;
}
Antwoord 25
<div class="col-md-6">
<div class="inner">
<!-- Put the col-6 elements in the inner div -->
</div>
</div>
Dit biedt standaard wat opvulling in de buitenste div zoals u dat nodig lijkt te hebben. Bovendien kunt u de opvulling ook aanpassen met aangepaste CSS.
Antwoord 26
Eenvoudige manier
.row div{
padding-left: 8px;
padding-right: 8px;
}
Antwoord 27
Bootstrap 4
Documentatie zegt (hier):
Rijen zijn wrappers voor kolommen. Elke kolom heeft horizontale opvulling (een goot genoemd) om de ruimte ertussen te regelen. Deze opvulling wordt vervolgens tegengegaan op de rijen met negatieve marges. Op deze manier wordt alle inhoud in uw kolommen visueel uitgelijnd aan de linkerkant.
Dus het juiste antwoord is: stel cols’ padding-left/right gelijk aan minus je row‘s margin-left/right. Zo simpel.
#my-row {
margin-left: -80px;
margin-right: -80px;
}
#my-col {
padding-left: 80px;
padding-right: 80px;
}
Demo: https://codepen.io/frouo/pen/OqGaWN
Antwoord 28
Maak een klas en gebruik:
marge: 1.5em .5em;
max-width: calc(50% – 1em)!belangrijk;
Waarbij 1em op de maximale breedte gelijk is aan de linker-/rechtermarge bij elkaar opgeteld.
Antwoord 29
<div class="row">
<div class="col-sm-6">
<div class="card">
Content one
</div>
</div>
<div class="col-sm-6">
<div class="card">
Content two
</div>
</div>
</div>
Antwoord 30
In Bootstrap v5.0kun je gap instellen met cssvariable:
.row {
--bs-gutter-x: 100px; // column-gap
--bs-gutter-y: 100px; // row-gap
}