Bagaimana untuk menghalang lajur Bootstrap daripada diselaraskan dengan bahagian bawah baris

Question

rreeee

Di sini butang "delete_element" yang saya cuba buat nampaknya menegaskan penjajaran bawah tidak kira bagaimana saya cuba menggayakannya, sama ada menggunakan gaya CSS sebaris atau memanggil kaedah penjajaran bootstrap. Saya mahu ia diselaraskan dengan elemen yang boleh diedit kandungan - bagaimana saya boleh melakukan ini? Adakah terdapat pepijat apabila menggunakan butang dalam col?

Answer 1

Anda tidak faham cara Bootstrap berfungsi, itulah sebabnya butang anda sejajar dengan bahagian bawah row (!).

NOTA: Saya menukar tajuk soalan anda kerana ia salah.

Terima kasih kerana menggunakan kelas col, butang anda akan sentiasa menggunakan keseluruhan lebar skrin (iaitu 12 lajur), tidak kira apa CSS yang anda tambahkan. Jadi masalahnya bukan disebabkan oleh butang, tetapi oleh kelas lajur.

Jika anda ingin memaparkan dua elemen sebelah menyebelah, maka:

1. Jumlah dua lajur tidak boleh melebihi 12 lajur
2. Jangan gunakan col类（你可以使用col-1、col-2、col-3 kelas (anda boleh menggunakan
, col-2, col-3, dsb.).

col-1Dalam contoh di bawah, anda dapat melihat bahawa saya menggunakan kelas dua kali (1 lajur + 1 lajur = 2 lajur, kurang daripada 12 lajur). Saya syorkan anda membaca dokumentasi Bootstrap 5 pada Grid System

.

Sila lihat coretan kod di bawah.

🎜

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