javascript - 在手机上查看时隐藏边框

Question

大家好，我想知道以下是否可行。我正在使用 Bootstrap 框架工作来构建一个简单的网页。在 CSS 中，某些 div 元素的边框显示为灰色，但是当我从移动设备上查看时，其中一些 div 被隐藏，并且边框属性看起来非常不合适。我想知道是否有一种方法可以使用 bootstrap 来定位 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所以大小是<768px See Bootstrap CSS所以你会添加一个 @media在你的CSS中。这将起作用:

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