<div class="row">
<div class="col-lg-10">
<div class="expandable-input-small" id="input_element" contenteditable="true" data-max-length="100">Test </div>
</div>
<div class="col">
<button class="btn" type="submit" value="click" name="delete_element">X</button>
</div>
</div>
我在這里嘗試制作的“delete_element”按鈕似乎堅持與底部對齊，無論我如何嘗試設定它的樣式，無論是使用行內 CSS 樣式還是呼叫引導對齊方法。我想讓它與 contenteditable 元素對齊 - 我該怎么做？在 col 中使用按鈕時是否有錯誤？
uj5u.com熱心網友回復：
您不了解 Bootstrap 的作業原理，這就是為什么您的按鈕無論如何都與row(!)的底部對齊的原因。
注意：我編輯了您的問題標題，因為它是錯誤的。
錯誤：如何阻止 Bootstrap 按鈕與 col 的底部對齊？
正確：如何阻止 Bootstrap 列與行的底部對齊？
由于 class col，無論您添加什么 CSS，您的按鈕都將始終占據全屏寬度（即 12 列）。因此，導致問題的不是按鈕。這是導致問題的列類。
如果你希望你的兩個元素并排，那么：
- 兩列加起來不應超過 12 列，并且
- 您不應該使用該類
col（您可以使用 classescol-1、col-2、col-3等）。
在下面的示例中，您可以看到我使用了該類col-1兩次（1 列 1 列 = 2 列，小于 12 列）。我建議您閱讀有關網格系統的 Bootstrap 5 檔案。
請參閱下面的片段。
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/516844.html
標籤：htmlcss推特引导引导程序 5
上一篇：如何獲取S3存盤桶中根目錄內的主檔案夾串列？亞馬遜S3
下一篇：如何讓列擴展到容器引導程式之外