Ich benutze Bootstrap 4 Alpha 6 und habe folgendes Problem:
Innerhalb einer Card habe ich ein Formular mit Labels. Dieses möchte ich gerne Linksbündig darstellen. Aus irgendeinem Grund wird aber das ganze Formular zentriert angezeigt.
Komisch ist auch, das der Submit Button eine Zeile weiter nach unten rutscht sobald ich 12 Spalten (col-md-xx) verwende, mit 11 Spalten bleibt er oben.
Ich poster hier mal meinen Code:
HTML
<div class="row mt-3">
<div class="col-xl-2 col-lg-1"></div>
<div class="col-xl-8 col-lg-10">
<div class="card mb-3">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="sortieren.php">Sortierfunktion</a></li>
<li class="nav-item"><a class="nav-link active" href="#">Suchfunktion</a></li>
</ul>
<div class="card-block row">
<form class="form-inline col-12 " method="GET" action="suche2.php">
<label for="fachauswahl" class=" col-12 col-sm-4 col-md-2 mx-left"> Fachauswahl: </label>
<select class="form-control col-12 col-sm-7 col-md-3 mb-2 mb-md-0" id="fachauswahl" name="fachauswahl">
<?php
while ($i < $anzahl) {
echo '<option value="'.$arr[$i].'">';
echo fach($arr[$i]);
echo '</option>';
$i++;
}
?>
</select>
<label for="sprache" class="col-12 col-sm-4 col-md-1"> Sprache: </label>
<select class="form-control col-12 col-sm-7 col-md-1 mb-2 mb-md-0" id="sprache" name="sprache">
<option value="de">Deutsch</option>
<option value="fr">Französisch</option>
<option value="it">Italienisch</option>
</select>
<label for="suchbegriff" class="col-12 col-sm-4 col-md-1">Suchbegriff:</label>
<input class="form-control col-12 col-sm-7 col-md-2 mb-2 mb-md-0" type="text" id="suchbegriff" name="suchbegriff" required>
<button type="submit" class="btn btn-primary col-md-1 ml-1 mx-right" name="submit"><i class="fa fa-search" aria-hidden="true"></i> Suchen</button>
</form>
</div>
<div class="card-footer">
<small class="text-muted"><i class="fa fa-question-circle" aria-hidden="true"></i> Wählen Sie ein Fach, optional ein Fragetyp und die gewünschte Sprache. Drücken Sie danach auf Suchen. <br><i class="fa fa-info-circle" aria-hidden="true"></i> Die Fragen werden nach Datum sortiert. Die neuste Frage erscheint immer ganz oben. Durch Klicken auf eine Frage wird diese angezeigt.</small>
</div>
</div>
<div class="col-xl-2 col-lg-1"></div>
</div>
</div>Und hier noch ein Screenshot:
