bootstrap html css切換更多信息格

如果我有<div class="parent"></div>我想製作這種類型的卡，以便在卡的底部我需要添加plus按鈕。單擊加號按鈕時，將切換另一個div以顯示，該按鈕將更改爲minus。當單擊減號按鈕時，將切換附加div以隱藏返回到初始階段。我正在使用bootstrap，並需要在一行內創建這些卡。所有元素必須在相同的parent格內。bootstrap html css切換更多信息格

類似這樣的事情：請注意這3張圖片顯示單張卡片的事件生命週期。

我的問題是：如何在底部邊框的中心按下按鈕，並在擴展框的同時將邊框保留在那裏？

我嘗試：jsFiddle

來源

2017-03-07 user2818430

你嘗試過什麼到目前爲止？ – ZimSystem

@ZimSystem：請檢查jsFiddle鏈接。 – user2818430

謝謝。那麼問題是什麼？切換其他卡片或更改+/-圖標是否存在問題？ – ZimSystem

你嘗試的工作。它看起來不正確。你需要在你點擊按鈕時顯示的div上有一個clearfix，因爲你使用的左拉和右拉使用左浮動和右浮動。這裏是工作提琴：
https://jsfiddle.net/njzskdqr/

閱讀更多關於clearfix：
https://css-tricks.com/snippets/css/clear-fix/

只需添加類CF與類崩父

.cf::before, .cf::after{ 
    display: table; 
    content: ''; 
} 

.cf::after{ 
    clear:both; 
}

來源

2017-03-07 20:05:10

如何保持底部邊框？目前，當點擊按鈕時，底部邊框會隨着更多的信息框展開。底部邊框應保持原位，並在底部顯示更多信息框，使其具有2個盒子而不是1個盒子。就像我在上面發佈的圖像中的第2步，有一個邊框將主信息框和更多信息框分開。 – user2818430

你需要給它一個高度 –

在這裏你去https://jsfiddle.net/njzskdqr/1/ –

使用position: absolute的圖標按鈕..

.btn.btn-info { 
    position: absolute; 
    z-index: 1; 
    top: 14px; 
    left: 50%; 
    transform: translateX(-50%); 
    border-radius: 50%; 
}

http://www.codeply.com/go/6TS1fcsXi6

來源

2017-03-07 19:53:58 ZimSystem

bootstrap html css切換更多信息格

回答

相關問題