Ik heb zojuist bootstrap geleerd en probeer een formulier te centreren met bootstrap 4, maar het lijkt steeds maar te falen. Ik heb geprobeerd container, marge auto, raster, etc. te plaatsen, maar het lukt nog steeds niet.
Hier is de laatste code die het bootstrap-raster gebruikt.
<form class="col-lg-6 offset-lg-3">
<div class="row">
<input type="text" placeholder="Example input">
<span class="input-group-btn">
<button class="btn btn-primary">Download</button>
</span>
</div>
</form>
en hier is de link https://jsfiddle.net/artjia/emsw7t93/
Antwoord 1, autoriteit 100%
gebruikte justify-content-center
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<form class="col-lg-6 offset-lg-3 ">
<div class="row justify-content-center">
<input type="text" placeholder="Example input">
<span class="input-group-btn">
<button class="btn btn-primary">Download</button>
</span>
</div>
</form>Antwoord 2, autoriteit 19%
Gebruik de css-klasse justify-content-center.
offset-col-* css-klasse bestaat niet meer in V4-bootstrap. Nu maakt het gebruik van flex grid.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center">
<div class="col-6">
<form>
<input type="text" placeholder="Example input">
<span class="input-group-btn">
<button class="btn btn-primary">Download</button>
</span>
</form>
</div>
</div>
</div>Antwoord 3
- Kolommen gaan binnen rijen, niet andersom
- De offset-eigenschappen zijn van Bootstrap 3 en niet van Bootstrap 4. U moet marge offsets in plaats daarvan
Zoals:
<form class="row">
<div class="col-lg-6 ml-auto">