Недавно я столкнулся с проблемой, с nav bootstrap
Логотип и меню в две строки в Bootstrap
Это, кажется, чтобы быть совершенным, но размер 992 до 768px, я не могу стоять, чтобы сделать меню и логотип в той же строки.
Вот образ
HTML код
<div id="main-header">
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-default navbar-static-top" role="navigation" id="navigation-home">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" class"img-responsive" alt="Logo PantaRei"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<a href="index.html" class="dropdown-toggle" data-toggle="dropdown"> Home <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="index.html"> Home Revolution Slider </a></li>
<li><a href="home-flexslider.html"> Home Flexslider</a></li>
<li class="divider"></li>
<li><a href="home-2.html"> Home Style 2</a></li>
<li><a href="home-3.html"> Home Style 3</a></li>
<li><a href="home-4.html"> Home Style 4</a></li>
<li><a href="home-5.html"> Home Style 5</a></li>
<li><a href="one-page.html"> One Page</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle navigation-effects" data-toggle="dropdown"> Blog <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="blog-large.html"> Large Blog </a></li>
<li><a href="blog-medium.html"> Medium Blog </a></li>
<li><a href="blog.html"> Small Blog </a></li>
<li class="divider"></li>
<li><a href="single-post.html"> Single Post </a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Features <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"> Grid System </a></li>
<li><a href="pricing-tables.html"> Pricing Tables </a></li>
<li><a href="icon.html"> Icons </a></li>
<li><a href="typography.html"> Typhography </a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Portfolio <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="portfolio-4.html"> Portfolio 4 columns </a></li>
<li><a href="portfolio-3.html"> Portfolio 3 columns </a></li>
<li><a href="portfolio-2.html"> Portfolio 2 columns </a></li>
<li class="divider"></li>
<li><a href="single-project.html"> Single Project </a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Pages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="gridsystem.html"> Grid System </a></li>
<li><a href="full-width.html"> Full Width </a></li>
<li><a href="custom-header.html"> Custom Header </a></li>
<li><a href="404.html"> 404 Error </a></li>
<li><a href="team.html"> Team </a></li>
<li><a href="search.html"> Search Result </a></li>
<li><a href="faq.html"> FAQ </a></li>
<li class="divider"></li>
</ul>
</li>
<li class="dropdown">
<a href="contact-us.html">Contact Us</a>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</nav>
</div>
</div> <!-- /.row -->
</div> <!-- /#main-header -->
Это jsfiddle
Кто-нибудь знает, как это сделать? Заранее благодарен всем
Можете ли вы включить свой текущий код. – Cam
Да, то же самое. У меня часто возникает эта проблема, и я обычно добавляю медиа-запрос для корректировки отступов и/или полей на навигационных элементах. –
@Cam ... я добавил html-код, thx для вашего комментария;) – user3198605