Q&A
###やりたいこと
私はBootstrapを使って、HTMLレイアウトを作成しています。
下記図をご覧ください。
div間が詰まり、スペースがありません。
これを、div間にスペースを入れたいです。
###躓いている箇所
Bootstrapの使い方を下記サイトにて勉強しました。
http://websae.net/twitter-bootstrap-grid-system-21060224/
基本的なグリッドシステムは把握しているつもりでしたが、うまくdiv間にスペースを入れられず困っています。
col-md-10
├col-md-4
├col-md-2
├col-md-4
としてみましたが、div間にスペースが広くなりすぎて、断念しました。
できれば、「padding: 50px;」や「margin: 50px;」単位で細かに微調整したいです。
###ソース
html
1 2<!doctype html> 3<html lang="ja"> 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 8 <title> ホーム</title> 9 10 11 <!-- Scripts --> 12 <script src="http://localhost:8001/js/app.js" defer></script> 13 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 14 <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> 15 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 16 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 17 18 <!-- Fonts --> 19 <link rel="dns-prefetch" href="//fonts.gstatic.com"> 20 <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> 21 22 <!-- Styles --> 23 <link href="http://localhost:8001/css/app.css" rel="stylesheet"> 24 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 25 <link href="http://localhost:8001/css/seller.css" rel="stylesheet"> 26 27</head> 28<body style="background-color: rgb(246,246,246); padding-top: 5rem"><!-- --> 29 30 <div id="app"> 31 32 <nav class="navbar navbar--expand-md navbar-light bg-white shadow-sm fixed-top"> 33 <div class="container col-md-10 "> 34 35 </div> 36 </nav> 37 38 <main class="py-4"> 39 <div class="container col-md-10"> 40 <div class="row justify--content-center"> 41 42 <div class="card col-md-6"> 43 <div class="card-header" style="background-color: white"> 44 お知らせ 45 <div class="text-right" style="float: right"> 46 <small><a href="#">もっと見る</a></small> 47 </div> 48 </div> 49 50 <div class="card-body"> 51 <p>AAAAAAAAAAAA</p> 52 53 54 </div> 55 </div> 56 57 58 <div class="card col-md-6"> 59 <div class="card-header" style="background-color: white"> 60 お知らせ 61 <div class="text-right" style="float: right"> 62 <small><a href="#">もっと見る</a></small> 63 </div> 64 </div> 65 66 <div class="card-body"> 67 <p>データはありません</p> 68 </div> 69 </div> 70 71 72 73 74 </div> 75</div> 76 </main> 77 78</body> 79</html> 80
どう変更したら良いでしょうか？
お力添えいただけますと幸いです。
回答1件
0
ベストアンサー
html
1 <div class="col-md-6"> 2 <div class="card">
のように、col-*の中にcardを置く形にすると、間隔があくと思います。
細かに微調整したい
Bootstrap 5であれば、gutterが使えると思います。
Gutters (ガター) · Bootstrap v5.0
4 の場合は、こちらが参考になるかと思います。
Grid system - Bootstrap 4.2 - 日本語リファレンス
投稿2021/09/09 01:48
総合スコア36960
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/14 10:01
2021/10/16 03:55
2021/10/16 04:16