Bootstrap 在小屏幕上没有边距答案

【问题标题】：Bootstrap no margin on smaller screenBootstrap 在小屏幕上没有边距
【发布时间】：2014-11-30 13:08:26
【问题描述】：

大家好，我在 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？谢谢

【问题讨论】：

试试@media（最小宽度）和（最大宽度）

标签： html css twitter-bootstrap

【解决方案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;
}

【讨论】：

悲伤又好笑，在平板电脑上工作，但在大屏幕上边距不起作用