Скрыть границу при просмотре на мобильном телефоне

Question

Привет всем Я хочу знать, возможно ли следующее. Я использую работу бутстрапа для создания простой веб-страницы. В CSS у меня граничит с некоторыми элементами div, которые отображаются как серые, но когда я просматриваю с мобильных устройств, некоторые из этих divs скрыты, а свойство границы выглядит неуместно. Я хотел бы знать, есть ли способ нацеливать элементы CSS с помощью бутстрапа, поэтому, если страница изменена на мобильный, цвет границы изменяется на черный или вообще не отображается.

Вот пример моего кода. HTML

<div class="container"> 
    <!--Strt of row--> 
    <div class="row"> 
    <!--leftdiv1--> 
    <div class="col-sm-6" id="left1"> 
     <h3 class="text-center" id="main">XXXXXXX</h3> 
     <p class="text-center">XXXX & XXXXX</p> 
    </div> 
    <!--rightdiv1--> 
<div class="col-sm-6 hidden-xs contacts" id="right1"> 
    <ul> 
     <li><a id ="print" href="#"><span class="glyphicon glyphicon-print"></span> Print</a></li> 
     <li><a href="https://drive.google.com/file/d/0B1NTGaJa5XdtVlpvQUttVWhmMXM/view" target ="_blank"><span class="glyphicon glyphicon-save-file"></span> Download</a></li> 
     <li><a id="contact" href="#"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li> 
    </ul> 
    </div> 
</div> 

CSS

#left1 { 
    border-right: dashed grey 3px; 
    border-bottom: dashed grey 3px; 
    height: 100px; 
    overflow: auto; 
} 

#right1 { 
    border-bottom: dashed grey 3px; 
    height: 100px; 
    overflow: auto; 
} 

Answer 1

Да, как я вижу, что вы пытаетесь скрыть col-xs поэтому размер <768pxSee Bootstrap CSS Таким образом, вы бы добавить @media в вашем CSS. Это будет работать:

@media (max-width: 768px) { 
#left1 { 
    border-right: 0px; 
    border-bottom: 0px; 
} 
#right1 { 
    border-bottom: 0px; 
} 
} 

Answer 2

Вы можете поставить дополнительный класс на элемент, например: hidden-xs. Он построен в бутстрапе.

http://getbootstrap.com/css/#responsive-utilities