我正在嘗試制作一個排行榜，其中用戶按勝利排名。因為我在有序串列中使用了第一個自定義影像，所以我似乎無法為串列（串列組、串列組項等）使用引導程式的內置樣式選項。有沒有人有關于如何使整個專案有下劃線的想法？
<React.Fragment>
<div className="card">
<div className="card-header">
Leader Board
</div>
<ol start="1" className="firstItem ">
{mainAccountsList.map(({userName}, i) => {
if (i === 0) {
return (
<React.Fragment>
<li className='secondItem px-0'>{userName}</li>
<span></span>
</React.Fragment>)
} else
return (
<React.Fragment>
<li className='thirdItem'>{userName}</li>
<span className='listBorder'></span>
</React.Fragment>
)})}
</ol>
</div>
我的 CSS
.firstItem {
background-image: url(crown-solid.svg);
background-size: 20px;
background-repeat: no-repeat;
background-position: 3% 1%;
margin-top: 5px;
}
.secondItem {
list-style-type: none;
margin-bottom: 5px;
}
.thirdItem {
margin-bottom: 5px;
}
.crown {
fill: gold;
}
這就是它現在的樣子：
這就是我希望它看起來的樣子：
uj5u.com熱心網友回復：
您絕對可以將 Bootstrap 的串列組與影像一起使用。冠和串列編號可以作為偽元素添加。
.list-group {
counter-reset: line-number;
}
.list-group-item {
counter-increment: line-number;
text-indent: 24px;
}
.list-group-item:after {
content: counter(line-number)".";
text-indent: 0;
position: absolute;
width: 24px;
height: 24px;
left: 0.5rem;
text-align: center;
}
.list-group-item.crowned:after {
content: '';
background-image: url(https://via.placeholder.com/24);
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<ul class="list-group m-4">
<li class="list-group-item crowned">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item crowned">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>uj5u.com熱心網友回復：
當您secondItem 為串列項設定時，它不起作用，您可以這樣做：
ol {
list-style-type: none;
}
接著
.firstItem {
background-image: url(crown-solid.svg);
background-size: 20px;
background-repeat: no-repeat;
background-position: 3% 1%;
margin-top: 5px;
}
或者：根據您的第二張圖片，您可以在引導程式中使用串列分組此鏈接可以幫助您引導串列
關于皇冠，我更喜歡在此旁邊使用字體圖示。您可以使用例如 fontawesom goodluck bro
uj5u.com熱心網友回復：
您還可以使用 css 在每個專案的底部添加一行：
border-bottom: 1px solid grey;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/512236.html