前提
7つのボタンを作っています。（Bootstrap使用）
実現したいこと
７つのボタンを表示したいのですが携帯画面にしたときとPC画面した時の
レイアウトを変えたいと思っています。
PC画面は実装できたのですが
携帯画面で苦戦しています。
具体的には
下記が現在の自分のスクリーンですが
最終的には下記の動画のようなスライドできるデザインにしたいと思っています。（携帯画面時）
https://www.youtube.com/watch?v=gmuJDlgEweM
該当のソースコード
CSS
.discover_history_top { margin-top: 100px; display: flex; flex-wrap: wrap; background-color: #1E3E75; padding: 7px; border-radius: 10px;} .discover_history_btn_collective { display: flex; margin: 0 auto; flex-wrap: wrap;} .btn_discover_history { /* margin: 5px; */ border: solid #1E3E75 !important; border-radius: 20px !important; width: 150px;}
HTML
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="main.css" /> <title>Bootstrap Sample</title> <!-- Bootstrap CSS --> <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="container condo_container"> <div class="row mx-auto text-center"> <div class="col-12"> <div class="discover_history_top"> <div class="discover_history_btn_collective"> <button class='btn btn-primary btn_discover_history'>Camera</button> <button class='btn btn-primary btn_discover_history'>Thermostat</button> <button class='btn btn-primary btn_discover_history'>Garage</button> <button class='btn btn-primary btn_discover_history'>Light</button> <button class='btn btn-primary btn_discover_history'>Lock</button> <button class='btn btn-primary btn_discover_history'>Sensor</button> <button class='btn btn-primary btn_discover_history'>Switch</button> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script type="text/javascript" src="main.js"></script> </body> </html>
0 コメント