Hide or Remove Left Border When Collapsing to Small Screen Using Bootstrap

问题

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

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.

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.

Here is the working 2nd div.

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

all classes are vanilla bootstrap.js files

回答1:

use this @media

@media (max-width:767px) {

      .border
      {
        border:0px solid !important
        }


      }

回答2:

.col-md- class as per [bootstrap] (http://getbootstrap.com/css/#grid-options) will apply for width >= 992px.

You can also try experimenting with other classes like .col-xs- .col-sm- .col-lg-

here is a sample code. hope it helps...

<!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>

回答3:

@media (max-width:767px) {

      .border
      {
        border:0px solid !important
        }


      }

回答4:

Simply write a media query and put your conditional styles inside of it. For example:

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

回答5:

Create a new stylenew.css file & paste this css below into that and attach like this <link href="stylenew.css" rel="stylesheet"> into your html in <head> tag.

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

来源：https://stackoverflow.com/questions/36027191/hide-or-remove-left-border-when-collapsing-to-small-screen-using-bootstrap

标签

html

css

twitter-bootstrap