【解決方法】私の場合、ブートストラップ表示が機能しないのはなぜですか? .

[ad_1]

以下のコードに従って、モバイル デバイスで 3 つの Div を表示し、1 つの Div を非表示にする HTML コードに行クラスの div があります。

<?php

session_start();
$mobil=null;
if(isset($_SESSION['mobi'])){
    
    $mobil = $_SESSION['mobi'];
    
}
?>
<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

 
</head>
<body style="margin:0;padding:0">
	<div style="width:100%;" >
		<img  src="img/logo1.jpg" style="display:inline; width:170px; height:70px;" />

		<a href="php/logout.php" style="display:inline;float:right;padding-right:1%;text-decoration:none;font-size:15px;">LogOut</a>
		
			<a href="login.html" style="display:inline;float:right;padding-right:1%;text-decoration:none;font-size:15px;margin-bottom:0">Login</a>
			
			<p style="display-inline;float:right;padding-right:1%">
			    <?php echo $mobil; ?></p>

			
			 

		  
		</div>

<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin-top:20px">
    <div class="container-fluid">
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" style="color:black;" class="nav-item nav-link active">Home</a>
                <div class="nav-item dropdown">
                    <a href="#" style="color:black;" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Products</a>
                    <div class="dropdown-menu">
                        <a href="tshirt.html" style="color:black;" class="dropdown-item">T-Shirt</a>
                        <a href="#" style="color:black;" class="dropdown-item">Jeans</a>
                    </div>
                </div>
                <a href="#" class="nav-item nav-link disabled" style="color:black;" tabindex="-1">About Us</a>
                <a href="#" style="color:black;" class="nav-item nav-link disabled" tabindex="-1">Contact Us</a>
            </div>
        </div>
    </div>
</nav>


<div class="container" style="margin-top:20px">
    
    <div class="row">
        
        <div class=".d-none" style="width:300px;">
            <p>ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p>
        </div>
        
        <div class="col-sm-3">
            <img src="img/new/img14.webp" class="img-thumbnail" style="width:350px; height:370px; border: 1px solid black"/>
            <p style="margin-bottom:0">Brand-H"&"M</p>
            <p style="margin-bottom:0">Size="L"</p>
            <p style="margin-bottom:0">Price Rs.350/- + Ship </p>
        </div>
        <div class="col-sm-3" >
            <img src="img/new/img15.webp" class="img-thumbnail" style="width:350px; height:370px;border: 1px solid black"/>
            <p style="margin-bottom:0">Brand-H"&"M</p>
            <p style="margin-bottom:0">Size="L"</p>
            <p style="margin-bottom:0">Price Rs.350/- + Ship</p>
        </div>
        <div class="col-sm-3" >
            <img src="img/new/img16.webp" class="img-thumbnail" style="width:350px; height:370px;border: 1px solid black"/>
            <p style="margin-bottom:0">Brand-H"&"M</p>
            <p style="margin-bottom:0">Size="L"</p>
            <p style="margin-bottom:0">Price Rs.350/- + Ship </p>
        </div>
  
      
    
    </div>
        
    
    
    
</div>



</body>
</html>

上記のコードのうち、以下を見てください

<div class="row">

    <div class=".d-none" style="width:300px;">
        <p>ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p>
    </div>

    <div class="col-sm-3">
        <img src="img/new/img14.webp" class="img-thumbnail" style="width:350px; height:370px; border: 1px solid black"/>
        <p style="margin-bottom:0">Brand-H"&"M</p>
        <p style="margin-bottom:0">Size="L"</p>
        <p style="margin-bottom:0">Price Rs.350/- + Ship </p>
    </div>
    <div class="col-sm-3" >
        <img src="img/new/img15.webp" class="img-thumbnail" style="width:350px; height:370px;border: 1px solid black"/>
        <p style="margin-bottom:0">Brand-H"&"M</p>
        <p style="margin-bottom:0">Size="L"</p>
        <p style="margin-bottom:0">Price Rs.350/- + Ship</p>
    </div>
    <div class="col-sm-3" >
        <img src="img/new/img16.webp" class="img-thumbnail" style="width:350px; height:370px;border: 1px solid black"/>
        <p style="margin-bottom:0">Brand-H"&"M</p>
        <p style="margin-bottom:0">Size="L"</p>
        <p style="margin-bottom:0">Price Rs.350/- + Ship </p>
    </div>



</div>

ブートストラップ V5 を使用しています。

上記のように非表示にしようとしていますが、私の場合は機能しません。 どこが間違っていますか？

私が試したこと：

独自の検索と研究開発を行うが失敗。

解決策 1

引用：
HTML
class=".d-none"

主要な . CSS でクラス セレクターを宣言したり、クラス名で要素をクエリしたりするために使用されます。 に含めるべきではありません。 class 属性。

HTML
class="d-none"

[ad_2]

コメント

タイトルとURLをコピーしました