Richten Sie die form in die Mitte, Bootstrap 4
Ich versuche, richten Sie die form in die Mitte und halten es entgegenkommend. Ich habe versucht, mehrere Möglichkeiten, aber kein Erfolg. Ich versuche, mich zu zentrieren, den gesamten text und form. Ich bin mit Bootstrap v4. Ich bin nicht sicher, ob das hilft.
HTML:
<section id="cover">
<div id="cover-caption">
<div id="container">
<div class="col-sm-10 col-sm offset-1">
<h1 class="display-3">Welcome to Bootstrap 4</h1>
<div class="info-form">
<form action="" class="form-inline">
<div class="form-group">
<label class="sr-only">Name</label>
<input type="text" class="form-control" placeholder="Jane Doe">
</div>
<div class="form-group">
<label class="sr-only">Email</label>
<input type="text" class="form-control" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-success ">okay, go!</button>
</form>
</div>
<br>
<a href="#nav-main" class="btn btn-secondary-outline btn-sm" role="button">↓</a>
</div>
</div>
</div>
</section>
CSS:
html,
body{
height: 100%;
}
#cover {
background: #222 url('../img/stars.jpg') center center no-repeat;
background-size: cover;
color: white;
height: 100%;
text-align: center;
display: flex;
align-items: center;
}
#cover-caption {
width: 100%;
}
Mögliche Duplikate von Wie center ein Formular mit Bootstrap?
Das ist nicht doppelt, da es nur relevant, um Bootstrap 3.
Das ist nicht doppelt, da es nur relevant, um Bootstrap 3.
InformationsquelleAutor EyedFox1 | 2017-06-06
Du musst angemeldet sein, um einen Kommentar abzugeben.
Müssen Sie die verschiedenen Bootstrap-4 Zentrierung Methoden...
text-center
für inline-Elemente.justify-content-center
für die flexbox-Elemente (ie;form-inline
)https://www.codeply.com/go/Am5LvvjTxC
Auch, um den offset der Spalte, die
col-sm-*
muss innerhalb eines.row
, und die.row
werden, müssen in einem container...InformationsquelleAutor Zim
InformationsquelleAutor SuRa
Alle oben genannten Antworten perfekt gibt die Lösung, um die Mitte der form mit
Bootstrap 4
. Allerdings, wenn jemand will, zu verwenden out of the boxBootstrap 4
css-Klassen ohne Hilfe von zusätzlichen styles und auch nicht nutzen wollen, dieflex
können wir dies so tun.Eine Beispiel-Formular
HTML
Link zu CodePen
https://codepen.io/anjanasilva/pen/WgLaGZ
Ich hoffe, das jemand hilft. Danke.
InformationsquelleAutor Anjana Silva