大家好我想知道以下是否可行。我正在使用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;
}
答案 0 :(得分:1)
是的,因为我看到你试图隐藏col-xs
所以尺寸为<768px
See Bootstrap CSS所以你要在你的CSS中添加@media
。这将有效:
@media (max-width: 768px) {
#left1 {
border-right: 0px;
border-bottom: 0px;
}
#right1 {
border-bottom: 0px;
}
}
答案 1 :(得分:0)
您可以在元素上添加一个额外的类,例如:hidden-xs
。它是在bootstrap中构建的。