導航欄折疊在平板電腦視圖中不起作用

Question

我有一個導航欄，它確實會在移動視圖中折疊，但是在平板電腦（或ipad pro）上有一個中斷或較大的填充/空白會破壞導航。 測試站點位於：

在平板電腦視圖中出現填充或邊距底部

我已經嘗試了許多方法，例如調整視口，並添加了指向bootstraps transition.js和塌陷.js文件的鏈接，但這都不起作用。

<!--navigation bar-->
<nav class="navbar navbar-default transparent navbar-static-top" role="navigation" id="navbar-main">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-lg-12"> <a class="navbar-brand" href="http://patskailua.com/index.php"><img src="http://patskailua.com/images/kailua-beach-properties-llc.png"  alt="pats kailua hawaiian Flower" usemap="#Map" class="img-responsive">
</a></div>
</div>
</div>
</div>
</div>
<div class="navbar-header">
<div class="text-center">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCollapse">
<span class="sr-only">Toggle Navigation</span>
<span class="fa fa-chevron-down"></span> Menu
</button>    
<div class="collapse navbar-collapse" id="navCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active goleft1"><a href="http://patskailua.com/wp/our-vacation-properties.php">vacation rentals</a></li>
<li><a href="http://patskailua.com/wp/sightseeing.php">kailua activities</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">rentals by size<span class="caret black"></span></a>
<ul class="dropdown-menu">
<li><a href="http://patskailua.com/wp/three-bedrooms.php" >Three Bedrooms</a></li>
<li><a href="http://patskailua.com/wp/two-bedrooms.php">Two Bedrooms</a></li>
<li><a href="http://patskailua.com/wp/one-bedrooms.php">One Bedrooms</a></li>
<li><a href="http://patskailua.com/wp/studios.php">Studios</a></li>
</ul>
</li><li><a href="http://patskailua.com/wp/contact-us.php">contact us</a>            </li>
<li><a href=" http://patskailua.com/wp/about-us.php">about us</a></li>
<li class="dropdown">
<a href=" http://patskailua.com/wp/property-management.php" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">property management and sales<span class="caret black"></span></a>
<ul class="dropdown-menu">
<li><a href=" http://patskailua.com/wp/property-management.php">Property Management</a></li>
<li><a href=" http://patskailua.com/wp/buying-a-home-in-hawaii.php">Buying a Property</a></li>
<li><a href=" http://patskailua.com/wp/selling-a-home-in-hawaii.php">Selling a Property</a></li>

     <li class="goleft"><a href="http://patskailua.com/index.php">home</a></li>
</li>
</ul>
</div>

</nav>
<!--end nav bar-->

如果有人對如何解決此問題有任何想法，那就太好了。 非常感謝。 -Beth

Answer 1

您可以嘗試通過col-md-12甚至col-sm-12更改類col-lg-12 col-sm-12 。

這將使您的導航欄適應更好的較小分辨率。