2017-11-25 31 views
0

我想在自舉卡中的圖像和卡體之間有邊框。我有一個CSS如下 -card-img-top和卡體之間的邊界

.card{ 
    border-width: 6px; 
    border-color: rgb(255, 255, 255); 
    border-radius: 0; 
    background-color: transparent; 
} 

.card-body{ 
    border-top-width: 5px; 
    border-top-color: rgb(255, 255, 255); 
    border-radius: 0; 
    color: rgb(255, 255, 255); 
    text-align: center; 
} 

HTML的

<div class="col-md-4"> 
    <div class="card"> 
    <img class="card-img-top" alt="Depression" src="images/depression.jpg"> 
    <div class="card-body"> 
     <h3 class="card-title">DEPRESSION</h3> 
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
    </div> 
    </div> 
</div> 

我want-

Card design I want

什麼我Getting-

Card design I'm Getting

所有幫助表示讚賞,謝謝。

+0

和HTML標記是什麼? – panther

回答

1

爲了使用邊框,邊框樣式是強制性的。正如你可以閱讀here

注:參見下文 有除非的邊框樣式屬性設置任何影響其他CSS邊框屬性的無!

,所以你可以試試這個代碼:

.card-body{ 
    border-top-width: 5px; 
    border-top-color: rgb(255, 255, 255); 
    border-top-style:solid; 
    border-radius: 0; 
    color: rgb(255, 255, 255); 
    text-align: center; 
} 

或者乾脆做到這一點:

.card-body{ 
    border-top: 5px solid rgb(255, 255, 255); 
    border-radius: 0; 
    color: rgb(255, 255, 255); 
    text-align: center; 
} 
+0

工作!謝謝!但我想知道爲什麼它在沒有邊框風格的'卡'類上工作... – GradDev

+1

@GradDev:較短版本的代碼可能是https://jsfiddle.net/jyfcrmty/ – panther

+1

@GradDev如果您檢查Bootstrap CSS,您將看到它已經定義;) –

相關問題