Question

当达到手机尺寸时，我有2个div很好地折叠成一个长列。

我在第二个div中添加了一个左蓝色边框，在2＆＃34;列＆＃34;之间创建了一个非常好的垂直分隔符。

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

不确定如何使用已经在div中实现的类来执行此操作。一旦屏幕足够小，边框看起来很笨重而且毫无用处。

这是工作的第二个div。

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

所有类都是vanilla bootstrap.js文件

Answer 1

使用此@media

@media (max-width:767px) {

      .border
      {
        border:0px solid !important
        }


      }

Answer 2

根据[bootstrap]（http://getbootstrap.com/css/#grid-options）的

.col-md-类将适用于宽度＆gt; = 992px。

你也可以尝试尝试其他类，如.col-xs- .col-sm- .col-lg -

这是一个示例代码。希望它有所帮助...

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Index Page</title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style>
        @media screen and (min-width: 992px) {
            .custom-border-left {
                border-left: 2px solid royalblue;
            }
        }
        </style>
    </head>
    <body>
        <div class="col-md-6">
            <p>First div</p>
        </div>

        <div class="custom-border-left col-md-6">
            <p>Second div</p>
        </div>

        <script src="js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>

        <script>
        $(document).ready(function(){
            //js code in here
        });
        </script>
    </body>
</html>

Answer 3

@media (max-width:767px) {

      .border
      {
        border:0px solid !important
        }


      }

Answer 4

创建一个新的stylenew.css文件＆amp;将此css粘贴到其中，并将此<link href="stylenew.css" rel="stylesheet">添加到<head>标记的html中。

@media only screen and (min-width:0px) and (max-width:767px){
  .border{
    border: 0 solid !important
  }
}

Answer 5

只需编写媒体查询并将条件样式放在其中。例如：

@media only screen and (max-width: 767px) {
  .border {
    border-left: none;
  }
}

使用Bootstrap折叠到小屏幕时隐藏或删除左边框

5 个答案: