Créer un formulaire en ligne en lignes et colonnes

Question

J'essaie d'apprendre la grille bootstrap et je souhaite créer une ligne avec deux colonnes : une large et une moins large. Dans la colonne de gauche, je souhaite placer un formulaire en ligne et dans la colonne de droite, plus étroite, je placerai un autre formulaire avec des boutons. J'ai copié l'exemple Bootstrap avec une ligne de 2 colonnes, puis copié le code du formulaire en ligne Bootstrap et l'ai collé dans l'une des colonnes, mais lorsque j'exécute le code, il n'est pas en ligne. Voici mon code pour l'instant :

<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>

Les contrôles du formulaire ne sont pas en ligne, mais empilés les uns sur les autres.

Quelqu'un peut-il voir où je me trompe ?

Answer 1

Vous utilisez une classe d'une ancienne version de Bootstrap, mais vous utilisez Bootstrap 5.1. J'ai apporté quelques modifications : Tout d'abord, c'est la classe .visually-hidden，不再是 .sr-only。其次，不再支持 .form-inline ，因此我将该类更改为 row 并将 .col-3 ajoutée aux enfants du formulaire. J'ai également modifié les classes des deux colonnes, car vous avez dit que vous souhaitiez que l'une soit plus large que l'autre. Je ne sais pas quelles ressources de Bootstrap vous utilisez, mais je vous recommande de vous référer à la Documentation officielle.

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

  

    

      

        

          Name
          
        

        

          Username
          
        

        

          
          
            Remember me
          
        

        Submit
      
    
    

      One of two columns