Html 引导sm调整大小不制动_Html_Css_Bootstrap 4

Html 引导sm调整大小不制动

html css bootstrap-4

Html 引导sm调整大小不制动,html,css,bootstrap-4,Html,Css,Bootstrap 4,这是我的HTML代码。引导css包含在head中根据Bootstrap，小屏幕上的每个col div需要12个字符，基本上是全屏幕。它还应该用.d-sm-none.d-md-block隐藏img 但是，当我在chrome工具中调整大小时，进展并不顺利。到目前为止，谷歌可以帮助我。还尝试删除flex类，dosent改变了一件事 <body cz-shortcut-listen="true"> <div class="container-fluid">

这是我的HTML代码。引导css包含在head中

根据Bootstrap，小屏幕上的每个col div需要12个字符，基本上是全屏幕。它还应该用.d-sm-none.d-md-block隐藏img 但是，当我在chrome工具中调整大小时，进展并不顺利。到目前为止，谷歌可以帮助我。还尝试删除flex类，dosent改变了一件事

<body cz-shortcut-listen="true">

    <div class="container-fluid">
        <div class="row d-flex flex-wrap">



    <div class="col-sm-12 col-md-6 col-lg-3 ">

      <div class="card" style="width: 18rem;">
      <img class="card-img-top d-sm-none d-md-block" src="img/1.jpg" alt="Tower">
      <div class="card-body">
        <h5 class="card-title">Tower</h5>
        <p class="card-text">City: dubay Zip-Code 4993
        <br>
        </p><p>Created: 1.2.2015, 05:40:00
        </p>
            </div>
            </div>
    </div>



    <div class="col-sm-12 col-md-6 col-lg-3 ">

      <div class="card" style="width: 18rem;">
      <img class="card-img-top d-sm-none d-md-block" src="img/1.jpg" alt="Palme">
      <div class="card-body">
        <h5 class="card-title">Palme</h5>
        <p class="card-text">City: Dubai Zip-Code 333
        <br>
        </p><p>Created: 1.2.2011, 05:40:00
        </p>
            </div>
            </div>
    </div>


      <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="img/2.jpg" alt="Mcdonald">
      <div class="card-body">
        <h5 class="card-title">Mcdonald fastfood</h5>
        <p class="card-text">City: melbourn Zip-Code 4544
        <br>
        </p><p>
        <label>Phone, Web</label>
        <br>
        +66 4895643312 
        <br>
        www.getfat.com
        </p><p>Created: 2.3.2020, 04:30:00
         </p>
            </div></div>
    </div>

      <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="img/2.jpg" alt="Burgerkin">
      <div class="card-body">
        <h5 class="card-title">Burgerkin fastfood</h5>
        <p class="card-text">City: Switzerlan Zip-Code 4334
        <br>
        </p><p>
        <label>Phone, Web</label>
        <br>
        +66 443543512 
        <br>
        www.getfatter.com
        </p><p>Created: 2.3.2011, 04:30:00
         </p>
            </div></div>
    </div>

      <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="img/3.jpg" alt="Eating Burger">
      <div class="card-body">
        <h5 class="card-title">Eating Burger</h5>
        <p class="card-text">City: burgertown Zip-Code 4234
        <br>
        <label> Event Infos </label>
        </p><ul>
        <li>14. June. 2100</li>
        <li>3 o clock</li>
        <li>56</li>
        <li>www.event.com</li>
        </ul>
        <p>Created: 1.2.2019, 03:25:00
        </p>
            </div></div>
    </div>

      <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="img/3.jpg" alt="Sky diving">
      <div class="card-body">
        <h5 class="card-title">Sky diving</h5>
        <p class="card-text">City: skytown Zip-Code 4666
        <br>
        <label> Event Infos </label>
        </p><ul>
        <li>14. June. 2000</li>
        <li>5 o clock</li>
        <li>560</li>
        <li>www.eve222nt.com</li>
        </ul>
        <p>Created: 1.2.2011, 03:25:00
        </p>
            </div></div>
    </div>
      </div>
    </div>



    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

d-sm-none功能正常。它位于img标签上，因此在这里的引导文档中引用的断点中，您可以看到sm断点实际上是用于横向手机的，因此只会将img从576px隐藏到768px。如果您试图在手机上以常规垂直方向定位，那么您可以将具有d-sm-none d-md-block的位置替换为.d-none.d-sm-block，如下所示：

当我将img设置为576px时，你可以在dev tools中看到这一点，你可以看到img在PALME部分显示为HIDE ME，我添加了HIDE ME来标记你想要隐藏的img卡

然后在这里，当我们转到575px时，你可以看到它像预期的那样消失：

至于您的列div问题，我不确定我是否理解您的问题，但我确实看到您的代码有什么问题。在bootstrap中，您必须拥有您所使用的类容器，然后在其中每行有12列。一旦一行被填满，您必须创建另一行来放入内容，该行最多可以容纳12列。您当前如何拥有代码是容器中的一行，然后是您的卡，上面都有col 12。下面是一个演示，我想你是想做什么，这是让卡跨越整个屏幕，从一个小屏幕，直到当你想让他们占一半的屏幕，我看到你把col-md-6。我通过删除flex类和您设置为18rem的卡的宽度来进行演示。现在它跨越了整个屏幕，因为我在col-xs-12中也添加了垂直方向手机的全屏功能，因为您卡上的最低屏幕是col-sm-12，正如我上面所说的，它只是手机横向方向的宽度

演示：

说明：您将在上面看到，即使没有附加图像，卡本身也会扩展为全屏，直到到达col-md-6断点@768px

如果你有任何问题，请告诉我

    <div class="row">  
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 ">
            <div class="card">
                <img class="card-img-top d-none d-sm-block" src="img/1.jpg" alt="Palme">
                <div class="card-body">
                    <h5 class="card-title">Palme</h5>
                    <p class="card-text">
                        City: Dubai Zip-Code 333
                        <br>
                    </p>
                    <p>HIDE ME</p>
                    <p>
                        Created: 1.2.2011, 05:40:00
                    </p>
                </div>
            </div>
        </div>
    </div>