Ich versuche, das Bootstrap-Raster zu lernen und möchte eine Zeile mit zwei Spalten erstellen: eine breite und eine nicht so breite. In der linken Spalte möchte ich ein Inline-Formular platzieren und in der rechten, schmaleren Spalte möchte ich ein weiteres Formular mit Schaltflächen platzieren. Ich habe das Bootstrap-Beispiel mit einer Zeile mit zwei Spalten kopiert, dann den Bootstrap-Inline-Formularcode kopiert und ihn in eine der Spalten eingefügt, aber wenn ich den Code ausführe, ist er nicht inline. Das ist mein Code bisher:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="MyContainer">
<div class="row">
<div class="col-6">
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
</div>
<div class="col-6">
One of two columns
</div>
</div>
</div>
Die Formularsteuerelemente sind nicht inline, sondern übereinander gestapelt.
Kann jemand sehen, wo ich falsch liege?
您正在使用旧版本 Bootstrap 中的类，但您使用的是 Bootstrap 5.1。我做了一些改变： 首先，它是
.visually-hidden，不再是.sr-only。其次，不再支持.form-inline，因此我将该类更改为row并将.col-3类添加到表单的子级中。我还更改了两列的类，正如您所说，您希望其中一个比另一个更宽。我不知道您使用 Bootstrap 的哪些资源，但我建议您参考官方文档。