Bootstrap 3 removes padding/margin when I break under 767px width

Question

When you look at that pen: http://codepen.io/helloworld/pen/eNpBdb

where I use bootstrap 3 css cdn attached.

<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>

When I resize my browser window to under 767px in width, why does the left margin/padding/space of the disclaimer hyperlink and all other 3 hyperlinks disappear?

Who removes that space? I need them as it looks very bad on small devices.

Answer 1

The row class has

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

The child column items have their own padding them.
This is meant to line up with the container that has

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

Solution: Remove the row class, or use the column-xs-12 class for your child element.

Answer 2

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