Question

当前，我正在创建一个基于bootstrap 4的网站，并希望针对移动设备进行优化。如何在某些屏幕尺寸下不显示元素？

通常我使用“ .hidden-sm-down”，如此处记录：https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

我还尝试了以下替代方法：.d-none .d-md-block .d-xl-none或隐藏。

<div class="col-lg-4 order-lg-1 .d-none .d-sm-block">
   <div class="card-profile-image">
      <a href="#">
        <img src="myimage.ong" alt="" class="rounded-circle">
      </a>
   </div>
</div>

当前可以为所有设备使用.d-none隐藏该元素，但我只想针对xs和sm对其进行隐藏。

Answer 1

当前可以对所有元素使用.d-none隐藏元素设备，但我只想为xs和sm隐藏它。

这应该为您工作

<div class="d-none d-md-block">
...
</div>

Answer 2

应为d-none d-md-block。您需要从.

中删除class

<div class="col-lg-4 order-lg-1 d-none d-md-block">
   <div class="card-profile-image">
      <a href="#">
        <img src="myimage.ong" alt="" class="rounded-circle">
      </a>
   </div>
</div>

Answer 3

您必须使用d-breakpoint-none来隐藏xs和sm断点中的元素，且不带点，如下所示：

<div class="col-lg-4 order-lg-1 d-sm-none d-md-block" > 
    <div class="card-profile-image"> 
      <a href="#"> 
      <img src="myimage.ong" alt="" class="rounded-circle"> 
      </a> 
   </div> 
</div>

有关更多详细信息 https://getbootstrap.com/docs/4.0/utilities/display/

Answer 4

您当前用HTML错误地编写了类名。 d-none和d-sm-block不应带有“。”。即

<div class="col-lg-4 order-lg-1 d-none d-sm-block">
   <div class="card-profile-image">
      <a href="#">
        <img src="myimage.ong" alt="" class="rounded-circle">
      </a>
   </div>
</div>

或者，您可以使用媒体查询来选择要显示为无的类。

@media screen and (max-width: 768px ) {
.classname {
display: none
}
}

这将隐藏xs和sm的类。

如何使用bootstrap4隐藏移动设备的元素？

4 个答案: