bootstrap4 で input−group の中で横にアコーディオンしたいのですがどうすればいいでしょうか
html
1<div class="accordion"> 2 <div class="input-group"> 3 <button>○</button> 4 </div> 5</div>
の状態から
<div class="accordion"> <div class="input-group"> <div class="input-group-prepend"> <button>○</button> </div> <input type="text" class="form-control form-control-sm"> <input type="text" class="form-control form-control-sm"> <div class="input-group-append"> <button>×</button> </div> </div> </div>
の状態に横にひろがるようにしたいです
横にスライドさせるアニメーションは bootstrap のクラスをつけるだけでは無理でしょうか?
あと input-group でなければアニメーション以外はできそうなのですが
input-group の中だと余分な div をつけるとすぐデザインが崩れるのでなかなかうまくいきません
自分で <input type="checkbox" class="d-none" id="acc"> をつけて
CSS で
.acc:checked + .acc_body { display: block; }
みたいなことをしようとしても input-group のなかにラベルを入れるとデザインが崩れます
いろいろ試行錯誤しているんですがなかなかうまくいかないので助けていただけるとありがたいです
HTMLが表すのは文書構造でありビジュアルではないので,HTMLだけみせられても,どのようにしたいのか分かりません.CSSも少しだけ載せられていますが,該当部分のHTMLがないため状況はを把握できません.それから,checkboxタグなど存在しないので修正してください(<input type="checkbox">ならある)
どんなコードを書けばよいのかまったくわからないなら,せめてイラストだけでも載せてください.完成予想図が見えない状態ではコードは書けないので
input-group は https://cccabinet.jpn.org/bootstrap4/components/input-group にあるようなつながったフォームを作るクラスで 最初は小さなボタン1個(4つ角ともまるい)の状態からクリックすると右にのびて複数の入力欄が出現するというものを作りたいです(入力欄は質問では input x 2 + アイコンボタン にしてますがもっといろいろ入ります)
checkbox は修正しました すいませんHTMLの生成自体はRailsのヘルパーを使ってるのでHTMLに関しては不正確なところがあるかもです
回答1件
あなたの回答
tips
プレビュー