Question

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

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

Answer 2

您可以在元素上添加一个额外的类，例如：hidden-xs。它是在bootstrap中构建的。

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

在移动设备上查看时隐藏边框

2 个答案: