Bootstrap在较小的屏幕上没有边距

时间:2014-11-30 13:08:26

标签: html css twitter-bootstrap

大家好,我在bootstrap中进行了导航,第一个元素是div class =" navbar-header"然后我添加了一点css,因为我想在导航下方的元素内联,一切正常,除了一个之外在所有屏幕上工作(大小:768x1024,平板电脑屏幕) 因为它有一个余量,它会推动下面的其他元素。

  

.navbar-header {margin-left:8%!important; }

我尝试添加

@media (min-width: 768px) {
 .navbar-header{
    margin-left:0;
    margin:0%;
    margin:0px;
}

但没有任何反应,如何在不同的屏幕上替换margin-left? 谢谢

1 个答案:

答案 0 :(得分:0)

您在主要规则上放置了!important。这就是你media query无效的原因。

在正常尺寸下使用它没有重要意义;

.navbar-header { margin-left:8%; }

然后在您的媒体查询中,您可以使用其他值;

@media (min-width: 768px) {
  .navbar-header{
    margin-left:0;
}

<强>更新

在这种情况下,您可以定义 2个媒体查询。一个用于>768,另一个用于<768。并在这些单独的部分中加入相互冲突的规则。

@media (min-width: 768px) {
  .navbar-header{
    margin-left:8!important;
}

@media (max-width: 767px) {
  .navbar-header{
    margin-left:0!important;
}

抱歉,我忘了把%放在下面的8.下面应该可以工作:

@media (min-width: 768px) {
  .navbar-header{
    margin-left:8%!important;
}

@media (max-width: 767px) {
  .navbar-header{
    margin-left:0!important;
}