问题与Bootstrap 3在小屏幕上折叠保证金顶部

Question

请您查看this demo并告诉我如何更正代码，仅在小屏幕上为.collapse添加边距？

正如您所看到的，我有一个高度为100px的自定义高度导航栏，但是引导程序仍然在.collapse（大约）之上显示50px！我试着添加

.navbar-inverse .navbar-collapse{
  margin-top: 50px;
}

它不起作用，但当我将!important添加到规则时，它可以正常工作

.navbar-inverse .navbar-collapse{
 margin-top: 50px !important;
}

然而，由于使用!important，这也会在大屏幕中为崩溃类添加不需要的边距！能告诉我如何解决这个问题吗？

由于

Answer 1

您应该使用以下代码仅在小屏幕上设置样式

@media screen and (max-width: your size px) { css code}

这意味着在具有最大宽度屏幕浏览器的设备上，请使用此规则进行css。

您也可以参考ID bs-example-navbar-collapse-1并使用类似的内容：

#bs-example-navbar-collapse-1{ margin-top: 50px; }