bootstrapで一定の値以下で余白を消す方法。
bootstrap4を使ってページの模写をしています。
bootstrapにおいてcontainerクラスで発生する両脇の余白をmedium以下でのみ消したいのですがそのような操作は可能なのでしょうか? 可能ならその方法を教えて頂きたいです。
試したこと
(修正1 左:実物 右:模写)windowの幅は同じです。 ![
補足情報(FW/ツールのバージョンなど)
bootstrap 4
模写中のサイト https://www.airbnb.jp/gift
<!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title></title> <!-- <link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 745px)"> --> <link rel="stylesheet" href="css/styles.css"> <style> @media screen and (min-width: 768px) { .cover { background: url(img/Bg.jpg); background-size: cover; max-width: 100%; height: 600px; background-position: center; } } @media screen and (max-width: 768px) { .cover { background: url(img/Bg.jpg); background-size: cover; max-width: 100%; height: 400px; background-position: center; } } .description2 { background-size: cover; background-color: #009999; height:440px; /* width: 100% */ } </style> </head> <body> <div id="top1" class="container cover"> <h1 id="trip" class="text-light text-font: bold; pb-2"><b>旅を贈ろう。</b></h1> <h5 class="text-light pb-3">Airbnbギフトカードで、世界をぐんと身近に</h5> <a href="" class="btn btn-light"><p class="gift ml-2 pt-1">ギフトカードを登録</p></a> </div> <div class="container"> <div class="row" id="description"> <h2 class="col-md-12 pt-5 pb-4 text-center font-weight-bold" id="minititle">いつも完璧な贈り物</h2> <div class="col-md-4" style="text-align:center"> <i class="far fa-envelope fa-3x pb-4 icon"></i> <h5 class="pb-2">簡単に使える</h5> <p class="text-muted">ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p> </div> <div class="col-md-4" style="text-align:center"> <i class="fas fa-stopwatch fa-3x pb-4 icon"></i> <h5 class="pb-2">有効期限なし</h5> <p class="text-muted">Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p> </div> <div class="col-md-4" style="text-align:center"> <i class="fas fa-globe fa-3x pb-4 icon"></i> <h5 class="pb-2">忘れられない旅</h5> <p class="text-muted">お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p> </div> </div> </div> <div class="container description2 text-light text-center"> <img src="img/PIcon.png" alt="box" class="pt-5 pb-4"> <h2 class="font-weight-bold pb-2">ギフトカードをもらったら...</h2> <h5 class="text-light">ログインあるいは利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</h5> </div>
回答3件
あなたの回答
tips
プレビュー