當我突破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來克服。