Bootstrap 4 - 当导航中存在值时，导航显示不正确

时间：2018-03-09 09:03:45

标签： navigation bootstrap-4

当导航中有值时导​​航无法正常显示，任何人都知道解决方案是什么？

enter image description here

＆＃13;
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light">
                <div class="container">
                    <a class="navbar-brand" href="/Website/">
                        
                        Navigation
                    </a>
                    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbar">
                        <ul id="main-navigation" class="navbar-nav mr-auto"><li class="nav-item" page="home"><a class="nav-link" target="_self" href="/Website/">Home</a></li><li class="nav-item dropdown" page="aboutus"><a class="nav-link dropdown-toggle" href="/Website/about">About us</a><ul class="dropdown-menu animated fadeInUp"><li class="nav-item" page="companyprofile"><a class="nav-link" target="_self" href="/Website/about">Company Profile</a></li><li class="nav-item" page="customerservice"><a class="nav-link" target="_self" href="/Website/customer-service">Customer Service</a></li><li class="nav-item" page="exportcompliance"><a class="nav-link" target="_self" href="/Website/export-compliance">Export Compliance</a></li></ul></li><li class="nav-item dropdown" page="products"><a class="nav-link dropdown-toggle" href="/Website/categories/all">Products</a><ul class="dropdown-menu animated fadeInUp"><li class="nav-item dropdown" page="crystaloscillators"><a class="nav-link dropdown-toggle" href="javascript:void(0)">Crystal Oscillators</a><ul class="sub-nav dropdown-menu third-level-nav animated fadeInUp"><li class="nav-item" page="ocxo"><a class="nav-link" target="_self" href="/Website/categories/ocxo-oven-controlled-crystal-oscillator">OCXO</a></li><li class="nav-item" page="tcxo"><a class="nav-link" target="_self" href="/Website/categories/tcxo">TCXO</a></li><li class="nav-item" page="vcxo"><a class="nav-link" target="_self" href="/Website/categories/vcxo">VCXO</a></li><li class="nav-item" page="xo"><a class="nav-link" target="_self" href="/Website/categories/xo">XO</a></li></ul></li><li class="nav-item" page="multioutputoscillators"><a class="nav-link" target="_self" href="/Website/categories/multi-output-oscillator-phase-coherent-outputs">Multi-Output Oscillators</a></li><li class="nav-item" page="crystal"><a class="nav-link" target="_self" href="/Website/categories/crystal">Crystal</a></li><li class="nav-item dropdown" page="filters"><a class="nav-link dropdown-toggle" href="javascript:void(0)">Filters</a><ul class="sub-nav dropdown-menu third-level-nav animated fadeInUp"><li class="nav-item" page="crystalfilters"><a class="nav-link" target="_self" href="/Website/categories/filter-crystal-filters">Crystal Filters</a></li><li class="nav-item" page="lcfilters"><a class="nav-link" target="_self" href="/Website/categories/filter-lc-filters">LC Filters</a></li></ul></li><li class="nav-item" page="bankfiltermodules"><a class="nav-link" target="_self" href="/Website/categories/bank-filter-module">Bank Filter Modules</a></li><li class="nav-item" page="tunablelcfilters"><a class="nav-link" target="_self" href="/Website/categories/tunable-lc-filters">Tunable LC Filters</a></li><li class="nav-item" page="tcxoghz"><a class="nav-link" target="_self" href="/Website/categories/ghz-tcxo-modules">TCXO (GHz)</a></li></ul></li><li class="nav-item dropdown" page="npaevents"><a class="nav-link dropdown-toggle" href="javascript:void(0)">NPA &amp; Events</a><ul class="dropdown-menu animated fadeInUp"><li class="nav-item" page="newproductannouncementsnpa"><a class="nav-link" target="_self" href="/Website/news">New Product Announcements (NPA)</a></li><li class="nav-item" page="events"><a class="nav-link" target="_self" href="/Website/events">Events</a></li></ul></li><li class="nav-item" page="catalogsbrochures"><a class="nav-link" target="_self" href="/Website/catalogs">Catalogs &amp; Brochures</a></li><li class="nav-item" page="producttraininginfo"><a class="nav-link" target="_self" href="/Website/content">Product Training Info</a></li><li class="nav-item dropdown" page="contactus"><a class="nav-link dropdown-toggle" href="/Website/contact">Contact Us</a><ul class="dropdown-menu animated fadeInUp"><li class="nav-item" page="careers"><a class="nav-link" target="_self" href="/Website/careers">Careers</a></li></ul></li></ul>
                        <div id="pnlShowSearchBox" class="search-main form-inline my-2 my-md-0">
	
                            <div class="input-group search">
                                <input name="ctl00$q" type="text" id="q" class="form-control" placeholder="Search for..." onkeydown="return funEnterPress(event,'btnCustomSearch')">
                                <span class="input-group-btn input-group-append">
                                    <a id="btnCustomSearch" class="btn btn-primary" href="javascript:__doPostBack('ctl00$btnCustomSearch','')"><svg class="svg-inline--fa fa-search fa-w-16 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg><!-- <i class="fas fa-lg fa-search"></i> --></a>
                                </span>
                            </div>
                        
</div>
                    </div>
                </div>
            </nav>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

为防止包裹在您的案例中，您需要使用navbar-expand-xl类，如下面的代码段所示。

这是因为你有很多内容，当这些内容不适合一行时，它会自动换行。

也可以使用text-nowrap类来阻止包装，但在这种情况下你真的不想这样做，因为这会破坏导航条，即导致行为你不会想要的。

因此，您需要减少导航栏中的项目数（如果您想使用navbar-expand-lg类（作为示例），或者您必须使用navbar-expand-xl类并且使用导航栏将在小于xl（= 1200px宽度）的屏幕上折叠。

用于减少导航栏中内容的其他选项是将搜索输入替换为单个图标（单击时扩展为完整搜索字段）并替换长短语，如＆＃34;产品培训信息＆＃34;与＃34;产品培训等＃34;等

这是一个正常工作的代码段（点击＆＃34;运行代码段＆＃34;在下面并展开到完整页面进行测试）：

＆＃13;
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-xl navbar-light bg-light">
<!--        <a class="navbar-brand" href="#">Navbar</a>-->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Catalogues &amp; Brochures</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Product Training Info</a>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    About us
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Products
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    NPA &amp; Events
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Contact Us
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>

        </ul>
        <form class="form-inline my-2 my-lg-0">
            <div class="input-group mr-sm-2">
                <input class="form-control"  type="search" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
                <div class="input-group-append">
                    <span class="input-group-text" id="basic-addon2"><i class="fas fa-search"></i></span>
                </div>
            </div>
        </form>
    </div>
</nav>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题