Q&A
5.0を利用しているのに参照したドキュメントが4.5では意味ないかと
Bootstrapで画面サイズ別に表示と非表示をしたいです。
以下のURLでサイズ別に表示と非表示をコントロールできるはずですが、
反映されません。
→https://getbootstrap.jp/docs/4.5/utilities/display/#hiding-elements
今はVisible only on smということで
.d-none .d-sm-block .d-md-none
に設定しました。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <!--Metaタグ--> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <!--Bootstrap CSS--> 9 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> 10 <title>Document</title> 11</head> 12<body> 13 <div id="carouselExampleFade" class="carousel slide carousel-fade .d-none .d-sm-block .d-md-none" data-ride="carousel"> 14 <div class="carousel-inner"> 15 <div class="carousel-item active"> 16 <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect fill="#777" width="100%" height="100%"/><text fill="#555" dy=".3em" x="50%" y="50%">First slide</text></svg> 17 </div> 18 <div class="carousel-item"> 19 <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect fill="#666" width="100%" height="100%"/><text fill="#444" dy=".3em" x="50%" y="50%">Second slide</text></svg> 20 </div> 21 <div class="carousel-item"> 22 <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect fill="#555" width="100%" height="100%"/><text fill="#333" dy=".3em" x="50%" y="50%">Third slide</text></svg> 23 </div> 24 </div> 25 <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev"> 26 <span class="carousel-control-prev-icon" aria-hidden="true"></span> 27 <span class="sr-only">Previous</span> 28 </a> 29 <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next"> 30 <span class="carousel-control-next-icon" aria-hidden="true"></span> 31 <span class="sr-only">Next</span> 32 </a> 33 </div> 34 <!--Bootstrap Js--> 35 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 36 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 37 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 38</body> 39</html>
回答1件
0
ベストアンサー
5.0を利用しているのに参照したドキュメントが4.5では意味ないかと。
ただ、cssが5.0でjsが4.3，ドキュメントが4.5と滅茶苦茶なので、いずれかに統一してください。
投稿2021/04/18 06:19
総合スコア80861
5.0ならjQuery不要ですしね。
なるほど。ありがとうございます。(*´▽｀*)
結局どのように解決したのでしょう
https://teratail.com/help/question-tips#questionTips4-2
あ、すみません。以下に説明します。
解決方法のステップ
①コメントを頂いているように、まずはbootstapのバージョンを統一。
僕の場合は、5.0にしました。つまり
こちら→https://getbootstrap.jp/docs/5.0/getting-started/introduction/
ですね。
②ここが大きな間違いでした。
クラスはこちら→https://getbootstrap.jp/docs/5.0/utilities/display/#hiding-elements
を見ると「.d-none .d-sm-block」のようにドット「.」がついていますが、
このドットはあくまでクラスを表す記号なので、index.htmlに書き込む場合は
ドット「.」を除いてあげます。
つまり、「.d-none .d-sm-block」を例にとると
class="d-none d-sm-block"のような感じです。
以下コードになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<!--Metaタグ-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div id="carouselExampleFade" class="carousel slide carousel-fade d-none d-sm-block d-md-none" data-bs-ride="carousel">
<div class="carousel-inner container">
<div class="carousel-item active">
<img src="https://picsum.photos/100/50" class="d-block w-100" alt="...">
</div>
<div class="carousel-itemk">
<img src="https://picsum.photos/100/50" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/100/50" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
<!--Bootstrap Js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
</body>
</html>
ありがとうございました。
解決されたようで何よりです。
あなたの回答
tips
プレビュー
