bootstrap4 を使ってフォーム入力欄をつくっているのですが
小さな入力フォームを1行にならべようとしてもレイアウトがうまくいきません
row > col-auto を使っても入力欄にはスペースがあるのに両端がはみ出してしまいます
グリッドレイアウトだときれいに12当分にできなくてcol-1だと小さいしcol-2だと大きすぎたりします
あと大きく3,4グループにわけて内側でさらに1/3とか1/4にわけたりしようとしても
内側に row や form-row をつけると負の margin が設定してあって重なってしまいます
1行になるべくぎっしり小さめのフォームを見栄え良くつめたい場合どうかけばいいのでしょうか
HTML はこんな感じで数字やボタンの入力が1~4ずつぐらいペアになってる感じで
<form> <div class="form-group"> <label>A</label> <input type="number"> <input type="number"> <button></button> </div> <div class="form-group"> <label>x</label><input type="number"> <label>y</label><input type="number"> <label>z</label><input type="number"> </div> ︙ </form>
これを
|A|100|200|BTN| |B|300|400|BTN| |x|1.2|y|3.4|x|5.6| |<2017|2018|2019>| ...
みたいな感じで 5 〜 6 グループ計 15 ぐらいボタンや text-input があるのですが
view-point 1000 ぐらいでみれば1要素 50px ぐらい幅があれば十分はいるはずなのに
一部の input が 100px ぐらいとってしまってうまく均等にならずに困っています
追記:
もう少し正確なHTMLソースです
<html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head> <body> <div class="navbar"></div> <div class="container-fluid"> <form> <div class="form-row"> <div class="form-group col"> <input type="select" class="form-control" placeholder="item name"> </div> <div class="input-group col"> <input type="text" class="form-control" placeholder="1.23456"> <input type="text" class="form-control" placeholder="9.87654"> <button type="button input-group-append" class="form-control">○</button> </div> <div class="form-group col"> <input type="text" class="form-control" placeholder="10"> </div> <div class="input-group col"> <input type="text" class="form-control" placeholder="2018-08-15 00:00"> <span class="form-text">〜</span> <input type="text" class="form-control" placeholder="2018-08-15 23:59"> <button type="button input-group-append" class="form-control">○</button> </div> <div class="input-group col"> <input type="checkbox" class="form-control"> <input type="text" class="form-control" placeholder="00:00"> <span class="form-text">〜</span> <input type="text" class="form-control" placeholder="23:59"> <button type="button input-group-append" class="form-control">○</button> </div> <div class="form-group col"> <button type="button input-group-append" class="form-control">○</button> <button type="button input-group-append" class="form-control">○</button> </div> </div> </form> </div> </body> </html>
一部部品省略してますがこれでネストした内側の入力幅がそろってほしい(欲をいえば桁数分ぎりぎりの長さになってほしい)
あと1文字のボタンとかはほぼ正方形ぐらいのサイズにまで縮んでほしい…
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/08/27 07:25
退会済みユーザー
2018/08/27 07:35
退会済みユーザー
2018/08/27 07:46