Блог

Главная - Вопросы по программированию - карты bootstrap4 на экране sm взаимодействуют друг с другом

карты bootstrap4 на экране sm взаимодействуют друг с другом

#javascript #html

Вопрос:

когда я запускаю этот пример в браузере, когда экран md, он показывает карту нормально, когда я нажимаю на экран sm, он не дает промежутков между картами, они сворачиваются, даже если я пытаюсь mb-5 и py-5, все равно они не разделяются, я не знаю, что я делаю неправильно, я тоже использую все файлы cs и jquery на своей странице

 <%---------------------------DIV ELECTRONICS_____-------------------%>
        <div class="row text-info "><h5> Electronics:</h5></div>
          
           
           
            <div class="row ">
            <%------------------Card1------%>
            <div class="col-md-3  py-5 mb-5">
      
            <div class="card mb-5 text-center shadow cardproperties">
             <div class="card-header bg-transparent border-top border-info">Mobile</div>
            <div class="inner ">  <img src="ex-Images/nokia1.jpg" class="card-img-bottom align-content-center  myim" /></div>
              <div class="card-body text-center">
                </div>
            </div>
                  
        </div>
               <%------------------Card-2-----%>
            
              <div class="col-md-3 py-5 mb-5">
      
            <div class="card  mb-5 text-center shadow cardproperties">
             <div class="card-header bg-transparent border-top border-info">Lap-top</div>
            <div class="inner ">  <img src="ex-Images/claptop1.jpg" class="card-img-bottom align-content-center myim" /></div>
              <div class="card-body text-center">
                </div>
            </div>
                  
        </div>    
        
             <%------------------Card-3-----%>
              

             <div class="col-md-3 py-5 mb-5">
      
            <div class="card mb-5 text-center shadow cardproperties">
             <div class="card-header bg-transparent border-top border-info">TV / LED </div>
            <div class="inner ">  <img src="ex-Images/ctv2.jpeg" class="card-img-bottom align-content-center  myim" /></div>
              <div class="card-body text-center">
                </div>
            </div></div>
   




             </div>


           </div>

Ответ №1:

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>

<body class="container mt-5">
    <div>
        <div class="text-info">
            <h5> Electronics:</h5>
        </div>
        <div class="row ">
            <div class="col-md-3  py-5 mb-5">

                <div class="card mb-5 text-center shadow cardproperties">
                    <div class="card-header bg-transparent border-top border-info">Mobile</div>
                    <div class="inner "> <img src="ex-Images/nokia1.jpg"
                            class="card-img-bottom align-content-center  myim" /></div>
                    <div class="card-body text-center">
                    </div>
                </div>

            </div>


            <div class="col-md-3 py-5 mb-5">

                <div class="card  mb-5 text-center shadow cardproperties">
                    <div class="card-header bg-transparent border-top border-info">Lap-top</div>
                    <div class="inner "> <img src="ex-Images/claptop1.jpg"
                            class="card-img-bottom align-content-center myim" /></div>
                    <div class="card-body text-center">
                    </div>
                </div>

            </div>



            <div class="col-md-3 py-5 mb-5">

                <div class="card mb-5 text-center shadow cardproperties">
                    <div class="card-header bg-transparent border-top border-info">TV / LED </div>
                    <div class="inner "> <img src="ex-Images/ctv2.jpeg"
                            class="card-img-bottom align-content-center  myim" /></div>
                    <div class="card-body text-center">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <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>
</body>


</html>

Я использую здесь ваш точный код, он выглядит нормально , они не сворачиваются

Метки: