防止Bootstrap列與行底部對齊的方法

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>

這裡我試圖創建的“delete_element”按鈕似乎無論我如何嘗試進行樣式設置，無論是使用內聯CSS樣式還是調用bootstrap的對齊方法，它都堅持底部對齊。我希望它與contenteditable元素對齊 - 我該如何做到這一點？在col中使用按鈕時是否有錯誤？

Answer 1

你不理解Bootstrap的工作原理，這就是為什麼你的按鈕無論如何都與row (!)底部對齊。

注意：我修改了你的問題標題，因為它是錯的。

由於使用了col類，你的按鈕將始終佔據整個螢幕寬度（即12列），無論你添加了什麼CSS。因此，問題不是按鈕引起的，而是列類引起的。

如果你想讓兩個元素並排顯示，那麼：

1. 兩個列加在一起不應超過12列
2. 不要使用col類別（你可以使用col-1、col-2、col-3等類別）。

在下面的範例中，你可以看到我使用了兩次col-1類別（1列 1列 = 2列，小於12列）。我建議你閱讀Bootstrap 5關於網格系統的文件。

請看下面的程式碼片段。

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