Question

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

.navbar-header {margin-left：8％！important; }

我尝试添加

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

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

Answer 1

您在主要规则上放置了!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;
}

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

1 个答案: