bootstrap-4 – 在导航栏中使用.container会缩小显示范围

bootstrap v4-alpha文档显示 you can use .container inside the navbar to have a centered (non-fluid) content.

但是,这似乎无法在超小型显示器上正常工作,因为.container盒缩小太小,因此徽标和菜单按钮相互堆叠.

这是显示问题的a JSFiddle example.

解决方法

目前在alpha 6 there is a bug中,导航栏内的容器在小屏幕上收缩宽度.这将在测试版中修复,但在此之前,您只需要一点CSS来保持内部容器在移动设备上的全宽.

@media (max-width:767px) {
    .container {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}