我有一系列要行內顯示的鏈接。由于某種原因，這在 Bootstrap 3 中有效，但自從升級到 Bootstrap 4 后，我無法再獲得行內顯示的鏈接。我試過在各種元素上使用浮點數和 display:inline 或 display:inline-block 但我似乎無法讓它作業。這是我一直在嘗試的代碼筆：https ://codepen.io/xanabobana/pen/pobRxpx
我的代碼：
.speciesDiv {
display: inline;
margin: 0.3em;
}
.label-success {
background-color: #5cb85c;
}
.label {
padding: 0.2em 0.6em 0.3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25em;
}
.scrolldown-click {
display:inline;
float:left;
}
<div class="list-group" id="speciesList">
<p>Jump to:</p>
<a class='scrolldown-click' role='button' href='#0-species-div'><div class='label label-sm label-success speciesDiv'>Abies balsamea</div></a>
<a class='scrolldown-click' role='button' href='#58-species-div'><div class='label label-sm label-success speciesDiv'>Acer rubrum</div></a>
<a class='scrolldown-click' role='button' href='#43-species-div'><div class='label label-sm label-success speciesDiv'>Acer saccharum</div></a>
</div>
uj5u.com熱心網友回復：
您可以使用Flexbox來實作它。
添加以下CSS
.list-group {
display: flex;
flex-direction: row;
}
代碼筆
uj5u.com熱心網友回復：
嘗試添加“list-inline”類：
<div class="list-group list-inline" id="speciesList">
<p>Jump to:</p>
<a class='scrolldown-click' role='button' href='#0-species-div'><div class='label label-sm label-success speciesDiv'>Abies balsamea</div></a>
<a class='scrolldown-click' role='button' href='#58-species-div'><div class='label label-sm label-success speciesDiv'>Acer rubrum</div></a>
<a class='scrolldown-click' role='button' href='#43-species-div'><div class='label label-sm label-success speciesDiv'>Acer saccharum</div></a>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/429647.html