使用Bootstrap折叠到小屏幕时隐藏或删除左边框 [英] Hide or Remove Left Border When Collapsing to Small Screen Using Bootstrap

问题描述

我有2个div，当达到电话大小时，它们可以很好地折叠成一长列.

I have 2 divs that collapse nicely into one long column when phone size is reached.

我在第二个div处添加了一个蓝色的左边框，在两个列"之间创建了一个非常漂亮的垂直分隔符.

I added a left blue border to the second div which creates a really nice vertical devider between the 2 "columns".

但是，我想隐藏边框或在列合并为一个的位置处删除.

However, I would like to hide the border or remove at the place that the columns combine into one.

不确定如何使用div中已隐含的类来执行此操作.一旦屏幕足够小，边框就会显得笨拙且无用.

Not sure how to do this with the classes already implimented in the div. The border looks clunky and useless once screen is small enough.

这是工作的第二分部.

 <div class="border col-md-6"  style="border-left:2px solid royalblue;">

所有类都是香草的bootstrap.js文件

all classes are vanilla bootstrap.js files

推荐答案

---

使用此@media

---

use this @media

@media (max-width:767px) {

      .border
      {
        border:0px solid !important
        }


      }

这篇关于使用Bootstrap折叠到小屏幕时隐藏或删除左边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！