Bootstrap 4手風琴卡的自定義樣式CSS

所以我現在已經在這個時間太長了，真的很想幫助我們獲得這個Bootstrap 4手風琴。Bootstrap 4手風琴卡的自定義樣式CSS

我想卡背景&鏈接透明，字體大小改變，字體顏色改變，沒有下劃線。我已經使用默認類和特殊類吸引了每一個ID &類，並且！重要並且沒有運氣。 Bootstrap 4文檔只給出了顏色受限的內聯樣式。

.testing { 
 
    background-color: transparent !important; 
 
} 
 

 
.special-card { 
 
    background-color: transparent !important; 
 
} 
 

 
.special-card a { 
 
    color: grey !important; 
 
    font-size: 15px !important; 
 
    text-decoration: none !important; 
 
} 
 

 
.special-card a:hover { 
 
    color: white !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="panel-group" id="accordion"> 
 
    <div class="card text-center"> 
 
    <div class="card-header testing"> 
 
     <h6 class="card-title"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Title</a> 
 
     </h6> 
 
    </div> 
 
    <div id="collapseOne" class="panel-collapse collapse"> 
 
     <div class="card-block special-card"> 
 
     <a href="" class="list-group-item">Link 1</a> 
 
     <a href="" class="list-group-item">Link 2</a> 
 
     <a href="" class="list-group-item">Link 3</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-06-09 Abstract3000

感謝您將引導源的編輯......但您添加的鏈接是針對3.3.7的分佈，這是按照Bootstrap 4 – Abstract3000

喜試試下面的代碼我已經添加背景色體，如果需要

HTML

<div class="panel-group" id="accordion"> 
    <div class="card text-center testing"> 
    <div class="card-header "> 
     <h6 class="card-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Title</a> 
     </h6> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse"> 
     <div class="card-block special-card"> 
     <a href="" class="list-group-item">Link 1</a> 
     <a href="" class="list-group-item">Link 2</a> 
     <a href="" class="list-group-item">Link 3</a> 
     </div> 
    </div> 
    </div> 
</div>

CSS

body 
{ 
    background-color: #212121; 
} 



.testing{ 
    background-color: transparent; 
} 
.testing .card-header 
{ 
    background-color: transparent; 
} 
.testing .card-title a 
{ 
    text-decoration:none; 
    font-size:20px; 
    color:grey; 
} 

.special-card { 
    background-color: transparent; 
} 

.special-card 
{ 
    background-color: transparent; 
} 

.special-card a { 
    color: grey; 
    font-size: 15px; 
    background-color: transparent; 
} 

.special-card a:hover { 
    color: white; 
    text-decoration: none; 
}

你可以改變它

無需使用！重要標誌..

希望這有助於 Here is a link for reference

來源

2017-06-09 07:37:36

謝謝Sir Sir This Works！ – Abstract3000

Bootstrap 4手風琴卡的自定義樣式CSS

回答

相關問題