Q&A
どのぐらいがいい感じなんですか？
containerを使って幅をいい感じに広げたいです。
今の状態ですとレスポンシブに対応しているときには左右の幅がいい感じになくなって
いるのですが、PC版で見た時には内側によりすぎてしまっています。
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 8 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> 9</head> 10<body> 11 <style> 12 .footer-details { 13 line-height: 4vw; 14 } 15 </style> 16 17 <footer class="bg-dark"> 18 <div class="container"> 19 <div class="h2 pt-5 pb-5 company-logo text-center text-white"> 20 hogehoge 21 <hr class="border-light"> 22 </div> 23 <div class="row footer-details"> 24 <div class="col-md-6 col-12"> 25 <div class="h3 text-white mt-3">hogehoge</div> 26 <div class="h4 text-white mt-3">T000-0000</div> 27 <div class="h6 text-white mt-3">TEL000-0000 </div> 28 <button class="bg-light btn-dark text-center text-secondary mt-3">hogehoge</button> 29 <div class="h3 text-white mt-3">0100-000-000</div> 30 </div> 31 <div class="col-md-6 col-12"> 32 <div class="border-bottom border-white text-right text-white"> 33 <a class="text-white" href="text-right">ほげほげ</a> 34 </div> 35 <div class="border-bottom border-white text-right text-white"> 36 <a class="text-white" href="text-right">ほげほげ</a> 37 </div> 38 <div class="border-bottom border-white text-right text-white"> 39 <a class="text-white" href="text-right">ほげほげ</a> 40 </div> 41 <div class="border-bottom border-white text-right text-white"> 42 <a class="text-white" href="text-right">ほげほげ</a> 43 </div> 44 <div class="border-bottom border-white text-right text-white"> 45 <a class="text-white" href="text-right">ほげほげ</a> 46 </div> 47 </div> 48 </div> 49 </div> 50 </footer> 51 52 </body> 53</html>
回答1件
0
ベストアンサー
$container-max-widthsを変更してコンパイルすることによって、カスタマイズができます。
Customizing the grid | Grid system - Bootstrap 4.4 - 日本語リファレンス
試していませんが、こんな感じではないでしょうか。
scss
1$container-max-widths: ( 2 sm: 540px, 3 md: 720px, 4 lg: 960px, 5// xl: 1140px 6 xl: 1340px // 200px広げた 7);
あるいは、アドホックでいいのであれば、
css
1.container{ 2 width: 1340px; 3 max-width: 1340px; 4}
とする方法もあるかもしれません。
投稿2020/12/01 08:14
総合スコア36946
ありがとうございます
すみません。このcontainerを広げると他の部分で使っていたcontainerにも反映されてしまったのですが、このfooterエリアだけに反映させるには、どうしたらいいでしょうか？
子孫セレクタで書くしかないと思いますが、詳細度の関係でいろいろ難しいと思います。
container で書くのをやめて、container-fluid で書いて、footer で幅を決めた方が楽かもしれません。
あなたの回答
tips
プレビュー
