当我突破767px宽度时，Bootstrap 3删除了填充/边距

Question

当您看那支笔时： http : //codepen.io/helloworld/pen/eNpBdb

我在这里使用bootstrap 3 CSS CDN。

<div class="container">
<div class="row">
    <ul style="background:orange;" class="nav navbar-nav">
        <li><a title="" href="http://test.com/en/deu/disclaimer/imprint.html" target="_self">disclaimer</a>
        </li>
        <li><a title="" href="http://test.com/en/deu/disclaimer/imprint.html#!/content=privacy" target="_self">Datenschutz</a>
        </li>
        <li><a title="" href="http://test.com/en/deu/disclaimer/site-map.html" target="_self">Sitemap</a>
        </li>
        <li><a title="" href="http://test.com/en/deu/disclaimer/contact.html" target="_self">Kontakt</a>
        </li>
    </ul>
</div>

当我将浏览器窗口的大小调整为小于767px时，为什么免责声明超链接和所有其他3个超链接的左侧边距/填充/空格消失了？

谁删除那个空间？ 我需要它们，因为在小型设备上看起来非常糟糕。

Answer 1

row类有

margin-left: -15px;
margin-right: -15px

子列项目有其自己的填充。
这意味着与排队container有

margin-left: 15px;
marign-right: 15px;

解决方案：删除row类，或对您的子元素使用column-xs-12类。

Answer 2

您正在使用“容器”，“行”，“导航”，“导航栏-导航”的类都是引导程序中的所有类，因为引导程序是为响应浏览器调整大小而构建的，因此它将尝试使较小的设备（电话）更容易使用，平板电脑等），可以通过在bootstrap include下添加自定义css文件并将某些属性设置为！important来克服。