Question

我使用自举导航栏如下：

<div id="custom-nav" class="navbar navbar-inverse navbar-fixed-top">
    <div  class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>                        
            </button>
            <a  href="#"><img style="margin-top:5px" src="images/logo.png" /></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="active" href="#">ANASAYFA</a></li>
                <li><a href="page1.html">KURUMSAL</a></li>
                <li><a href="#">UYGULAMALAR</a></li> 
                <li><a href="#">ÇÖZÜMLER</a></li> 
                <li><a href="#">ÜRÜNLER</a></li> 
                <li><a href="#">REFERANSLAR</a></li> 
                <li><a href="#">İLETİŞİM</a></li> 
            </ul>
        </div>
    </div>
</div>

我必须使用以下代码将导航栏的折叠断点更改为900px。它默认为768px。

@media (min-width: 768px) and (max-width: 899px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;  
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float: none;
    }
}

当我扩展折叠的导航栏时，它现在介于900px和768px之间，它会水平显示项目。

如何制作它以便垂直显示项目，如下面的768px？

Answer 1

必须覆盖一些更多的Bootstrap功能

我添加了一些更改以使其看起来更好，而不仅仅是让它们垂直对齐。：

@media (min-width: 768px) and (max-width: 899px) {
        .navbar-collapse.collapse {
            display: none !important;
        }

        .navbar-collapse.collapse.in {
            display: block !important;
        }

        .navbar-header .collapse, .navbar-toggle {
            display: block !important;
        }

        .navbar-header {
            float: none;
        }

        /*

            The changes start from here:

        */

        .navbar-right {
            float: none !important;
        }

        .navbar-nav > li {
            float: none;
        }

        .navbar-nav > li > a {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .navbar-collapse {
            -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
        }

        .container-fluid > .navbar-collapse {
            margin-right: -15px;
            margin-left: -15px;
        }

        .container-fluid > .navbar-header {
            margin-right: -15px;
            margin-left: -15px;
        }
    }

更改断点后，Bootstrap折叠导航栏水平延伸

1 个答案: