Erstellen Sie ein Inline-Formular in Zeilen und Spalten

Question

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?

Answer 1

您正在使用旧版本 Bootstrap 中的类，但您使用的是 Bootstrap 5.1。我做了一些改变： 首先，它是 .visually-hidden，不再是 .sr-only。其次，不再支持 .form-inline ，因此我将该类更改为 row 并将 .col-3 类添加到表单的子级中。我还更改了两列的类，正如您所说，您希望其中一个比另一个更宽。我不知道您使用 Bootstrap 的哪些资源，但我建议您参考官方文档。

[email protected]/dist/css/bootstrap.min.css">

  

    

      

        

          Name
          
        

        

          Username
          
        

        

          
          
            Remember me
          
        

        Submit
      
    
    

      One of two columns