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

我自己找到了解决方案：

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

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

由于引导程序本身不支持断点运算符，您可以让它永远显示，但在父容器中应用 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>

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

3 个答案: