もし私が<div class="parent"></div>を持っていれば、カードのベースにplusボタンを追加する必要があるようにこのタイプのカードを作りたいと思います。プラスボタンをクリックすると、表示する別のdivを切り替えると、ボタンはminusに変わります。マイナスボタンをクリックすると、追加のdivをトグルして初期段階に戻ります。私はブートストラップを使用しており、そのカードを連続して作成する必要があります。すべての要素は同じparent div内にある必要があります。ブートストラップhtml cssトグル詳細情報div
次のようなものです：これらの3つの画像は、1枚のカードのイベントのライフサイクルを示しています。
私の質問は、ボトムボーダーの中央にボタンを配置し、ボックスを展開すると同時にボーダーを保持する方法です。
私の試み：jsFiddle
あなたの試みが働いています。それはちょうど正しく見えません。左に浮動小数点を使用しているため、右に浮動小数点を使用するため、ボタンをクリックすると表示されているdivにclearfixが必要です。ここでの作業フィドルは次のとおりです。
https://jsfiddle.net/njzskdqr/
clearfixについての詳細を読むために：
https://css-tricks.com/snippets/css/clear-fix/
ちょうどあなたがこれまでに試してみました何
.cf::before, .cf::after{
display: table;
content: '';
}
.cf::after{
clear:both;
}
ボトムボーダーを維持するにはどうしたらいいですか？現在、ボタンをクリックすると、下の罫線が詳細情報ボックスに表示されます。下の罫線はそのまま残り、1つではなく2つの印象を与えるインフォボックスが下部に表示されます。上記の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%;
}
クラス崩壊して親にクラスのCFを追加します？ – ZimSystem
@ZimSystem：jsFiddleのリンクを確認してください。 – user2818430
ありがとうございます。それでは、質問/問題は何ですか？それは他のカードを切り替えること、または+/-アイコンを変更することで問題になりますか？ – ZimSystem