使用 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

如果引导程序本身不支持断点运算符，您可以让它永远显示，但在父容器中应用 overflow-hidden 以隐藏边框。这是一个纯引导 4 示例：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="form-group text-center overflow-hidden w-100">
      <div class="row d-flex mt-30">
          <div class="col-sm-6 text-center text-sm-right border-right mb-30 mb-sm-0">
              <div class="col-12 text-center p-20 bg-info">
                  <p class="align-middle" style="height: 120px;">
                      some contents here
                  </p>
                  <label for="">left label</label>
              </div>
          </div>
          <div class="col-sm-6 text-center text-sm-left">
              <div class="col-12 text-center p-20 bg-secondary">
                  <p class="align-middle" style="height: 120px;">
                      some contents here too
                  </p>
                  <label for="">right label</label>
              </div>
          </div>
      </div>
  </div>
 </div>

Answer 2

我使用 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 3

我自己找到了解决方案：

@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%;
 }
}