我正在嘗試實作一個包含 3 個行內元素的 col:2 個按鈕和一個選擇
我設法讓它與三個按鈕一起作業,但是如果我洗掉一個按鈕并由于某種未知原因添加一個選擇它不起作用。
3 個按鈕正常作業并正確對齊:

如果我們點擊 Tab2,所有三個專案都會出現混亂:

到目前為止我嘗試過的:
我認為這是一個form-select寬度問題,它被設定為100%所以我做了:
.form-select {
width: unset;
}
但是這三個元素仍然沒有對齊并且不是行內的。

我怎樣才能行內這三個元素?
現場 JSFIDDLE 演示
uj5u.com熱心網友回復:
您的選擇一直到下一行的原因是因為.form-select默認情況下該類的顯示型別為block
要解決您的問題,您認為應該使用 是正確的width: unset,但是您還必須設定display: inline-block以防止它轉到下一行。
應添加以下 CSS:
.form-select {
width: unset; /* note: width: auto; would also work here */
display: inline-block;
}
作業示例:https : //jsfiddle.net/bem0ojry/
請注意,如果有足夠的空間,這只會使 3 個元素并排,否則它們將自動換行到下一行。
https://developer.mozilla.org/en-US/docs/Web/CSS/display
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/348808.html
標籤:html css 推特引导 bootstrap-5
