Свертывание Navbar не работает в режиме просмотра планшета - PullRequest
Новая
       10

Свертывание Navbar не работает в режиме просмотра планшета

0 голосов
/ 17 мая 2018

У меня есть навигационная панель, которая сворачивается, как и должно быть в мобильном представлении, но на планшете (или ipad pro) есть разрыв или большой отступ / пробел, который нарушает навигацию. Сайт тестирования находится по адресу:

при просмотре планшета происходит заполнение или нижнее поле

Я пробовал несколько вещей, таких как настройка области просмотра и добавление ссылок на файлы bootstraps transition.js и collapse.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

1 Ответ

0 голосов
/ 19 мая 2018

Вы можете попробовать изменить класс col-lg-12 на col-md-12 или даже col-sm-12.

Это должно заставить вашу навигационную панель лучше адаптироваться к меньшим разрешениям.

...