html – 在Bootstrap中修改Navbar断点3.3.2

概述我使用Twitter引导将粗略的导航栏放在一起. 有一个断点,设备的宽度将导致导航栏项目折叠,并显示一个菜单按钮： 如何更改断点,以便导航栏更快崩溃？目前它能够打破一个新的线,当它出现在标志,这看起来不太好： 我已经尝试了一个修复详细的here,但它似乎打破了折叠的菜单(以后不能再扩展). 这是html： <!-- navigation --> <div class="navbar nav 我使用Twitter引导将粗略的导航栏放在一起.

有一个断点,设备的宽度将导致导航栏项目折叠,并显示一个菜单按钮：

如何更改断点,以便导航栏更快崩溃？目前它能够打破一个新的线,当它出现在标志,这看起来不太好：

我已经尝试了一个修复详细的here,但它似乎打破了折叠的菜单(以后不能再扩展).

这是HTML：

<!-- navigation -->    <div >        <div >            <div >                <button  data-toggle="collapse" data-target=".navbar-responsive-collapse">                    <span ></span>                    <span ></span>                    <span ></span>                </button>                <a  href="#"><img  src="/img/ManeEventlogoWhite-Sm.png"></a>            </div>            <div >                <ul >                    <li>                        <a href="/index.PHP">HOME</a>                    </li>                    <li >                        <a href="#"  data-toggle="dropdown" role="button" aria-expanded="false">SERVICES <span ></span></a>                            <ul  role="menu">                                <li><a href="/services/cutting-styling/index.PHP">Cutting & Styling</a></li>                                <li><a href="/services/coloring/index.PHP">coloring</a></li>                                                                <li><a href="/services/hair-straightening-relaxing/index.PHP">Permanent Hair Straightening & Relaxing</a></li>                                <li><a href="/services/balmain-hair-extensions/index.PHP">Balmain Hair Extensions</a></li>                            </ul>                    <li>                        <a href="/wedding-day/index.PHP">WEDDING DAY</a>                    </li>                    <li>                        <a href="/expertise-team/index.PHP">THE EXPERTISE TEAM</a>                    </li>                    <li>                        <a href="/photo-gallery/index.PHP">PHOTO galLERY</a>                    </li>                    <li>                        <a href="/blog/index.PHP">BLOG</a>                    </li>                </ul>            </div>        </div>    </div>

@H_404_12@解决方法 你使用哪个版本的引导？ 3.1？无论如何,我也需要你的CSS帮助你解决它,但一般来说：

@media (max-wIDth: 1200px) {    .navbar-header {        float: none;    }    .navbar-left,.navbar-right {        float: none !important;    }    .navbar-toggle {        display: block;    }    .navbar-collapse {        border-top: 1px solID transparent;        Box-shadow: inset 0 1px 0 rgba(255,255,0.1);    }    .navbar-fixed-top {        top: 0;        border-wIDth: 0 0 1px;    }    .navbar-collapse.collapse {        display: none!important;    }    .navbar-nav {        float: none!important;        margin-top: 7.5px;    }    .navbar-nav>li {        float: none;    }    .navbar-nav>li>a {        padding-top: 10px;        padding-bottom: 10px;    }    .collapse.in{        display:block !important;    }   .navbar-nav .open .dropdown-menu {       position: static;       float: none;       wIDth: auto;       margin-top: 0;       background-color: transparent;       border: 0;       -webkit-Box-shadow: none;       Box-shadow: none;    }}

最大宽度是断点.从Bootply复制(演示包括在那里).

@H_404_12@ @H_404_12@ 总结

以上是内存溢出为你收集整理的html – 在Bootstrap中修改Navbar断点3.3.2全部内容，希望文章能够帮你解决html – 在Bootstrap中修改Navbar断点3.3.2所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。