Comment empêcher les colonnes Bootstrap de s'aligner avec le bas de la ligne

Question

<div class="row">
                <div class="col-lg-10">
                    <div class="expandable-input-small" id="input_element" contenteditable="true" data-max-length="100">测试</div>
                </div>
                <div class="col">
                    <button class="btn" type="submit" value="click" name="delete_element">X</button>
                </div>
            </div>

Ici, le bouton "delete_element" que j'essaie de créer semble insister sur l'alignement inférieur, quelle que soit la façon dont j'essaie de le styliser, que ce soit en utilisant des styles CSS en ligne ou en appelant la méthode d'alignement de bootstrap. Je veux qu'il soit aligné avec l'élément contenteditable - comment faire ? Y a-t-il un bug lors de l'utilisation des boutons en col ?

Answer 1

Vous ne comprenez pas comment fonctionne Bootstrap, c'est pour cela que vos boutons sont alignés avec le bas row (!) de toute façon.

REMARQUE : j'ai modifié le titre de votre question car il était faux.

Grâce à l'utilisation de la classe col, votre bouton occupera toujours toute la largeur de l'écran (soit 12 colonnes), quel que soit le CSS que vous ajoutez. Le problème n’est donc pas causé par le bouton, mais par la classe de colonne.

Si vous souhaitez afficher deux éléments côte à côte, alors :

1. La somme de deux colonnes ne doit pas dépasser 12 colonnes
2. N'utilisez pas les classes col类（你可以使用col-1、col-2、col-3 (vous pouvez utiliser
, col-2, col-3, etc.).

col-1Dans l'exemple ci-dessous, vous pouvez voir que j'ai utilisé la class deux fois (1 colonne + 1 colonne = 2 colonnes, moins de 12 colonnes). Je vous recommande de lire la documentation Bootstrap 5 sur le Grid System

.

Veuillez consulter l'extrait de code ci-dessous.

🎜

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="row d-flex align-items-center">
  <div class="col-1">
    <div class="expandable-input-small" id="input_element" contenteditable="true" data-max-length="100">Test </div>
  </div>
  <div class="col-1">
    <button class="btn" type="submit" value="click" name="delete_element">X</button>
  </div>
</div>