使用 Bootstrap 隐藏超小型设备的边框

Question

我有这个代码：

 <div class="container my-container">
  <div class="row">
    <div class="col-md-4"><div class="c-sin"><h1><span class="glyphicon glyphicon-heart"></span></h1>"TEXT"</div></div>
    <div class="col-md-4"><div class="c-cen"><h1><span class="glyphicon glyphicon-user"></span></h1>"TEXT"</div></div>
    <div class="col-md-4"><div class="c-des"><h1><span class="glyphicon glyphicon-inbox"></spa n></h1>"TEXT"</div></div>
  </div>
 </div> 

问题是 PC 上的边框是这样可见的：

但在 xsmall 设备上是这样可见的：

所以我决定将它们隐藏在 xsmall 设备上，但我不知道该怎么做。
这里也是我用来创建边框的 CSS：

.c-sin {
    border-right: 1px solid #DADADA;
    padding-right: 10%;
}

.c-cen {
    border-right: 1px solid #DADADA;
    padding-right: 10%;
}

Answer 1

我使用 SASS 创建了一个新类：

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-down($breakpoint) {
    .border-#{$breakpoint}-left-none {
        border-left:none !important;
    }
    .border-#{$breakpoint}-right-none {
        border-right:none !important;
    }
    .border-#{$breakpoint}-top-none {
        border-top:none !important;
    }
    .border-#{$breakpoint}-bottom-none {
        border-bottom:none !important;
    }
  }
}

现在，您可以为您的 div 设置一个类似“border-xs-right”的类，并且对于超小屏幕，右边框将消失。“border-sm-right”将使小屏幕和 xs 屏幕的右边框消失。

当然，您必须使用 SASS 来执行此操作。如果您不想这样做，则编译后的代码如下所示：

@media (max-width: 575.98px) {
  .border-xs-left-none {
    border-left: none !important; }
  .border-xs-right-none {
    border-right: none !important; }
  .border-xs-top-none {
    border-top: none !important; }
  .border-xs-bottom-none {
    border-bottom: none !important; } }

@media (max-width: 767.98px) {
  .border-sm-left-none {
    border-left: none !important; }
  .border-sm-right-none {
    border-right: none !important; }
  .border-sm-top-none {
    border-top: none !important; }
  .border-sm-bottom-none {
    border-bottom: none !important; } }

@media (max-width: 991.98px) {
  .border-md-left-none {
    border-left: none !important; }
  .border-md-right-none {
    border-right: none !important; }
  .border-md-top-none {
    border-top: none !important; }
  .border-md-bottom-none {
    border-bottom: none !important; } }

@media (max-width: 1199.98px) {
  .border-lg-left-none {
    border-left: none !important; }
  .border-lg-right-none {
    border-right: none !important; }
  .border-lg-top-none {
    border-top: none !important; }
  .border-lg-bottom-none {
    border-bottom: none !important; } }

.border-xl-left-none {
  border-left: none !important; }

.border-xl-right-none {
  border-right: none !important; }

.border-xl-top-none {
  border-top: none !important; }

.border-xl-bottom-none {
  border-bottom: none !important; }

Answer 2

我自己找到了解决方案：

@media(max-width:767px){

.c-sin {
width: 100%;
border: hidden;
padding-left: 10%;
 }

.c-des {
width: 100%;
border: hidden;
padding-right: 10%;
 }

.c-cen {
width: 100%;
border: hidden;
padding-left: 10%;
padding-right: 10%;
 }
}