我正在使用Bootstrap 3建立一个网站。我的问题是网页上的导航栏显示在品牌div旁边，它左侧浮动。因此，当您使用手机访问网页时，导航栏没有足够的空间，您必须在菜单中滚动。
HTML
<div class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">FUTURE LOGO</a>
<div class="navbar-collapse navbar-responsive-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span> Domu</a></li>
<li><a href="obsahmp.html">Obsah MP</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Responzivní webdesign<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li><a href="responzivniwebdesign.html">Co to vlastně je?</a></li>
<li><a href="webovarozvrzeni.html">Webová rozvržení</a></li>
<li><a href="">Tvorba responzivního webu</a></li>
<li class="divider"></li>
<li class="dropdown-header">CSS frameworky</li>
<li><a href="#">Co, jak a proč?</a></li>
<li><a href="#">Twitter bootstrap</a></li>
</ul><!-- End dropdown-menu-->
</li><!-- End dropdown-->
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Použité komponenty<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li><a href="navbar.html">Navbar</a></li>
<li><a href="dropdown.html">Dropdown</a></li>
<li><a href="carousel.html">Carousel</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown-header</li>
<li><a href="#">Subsection</a></li>
<li><a href="#">Subsection</a></li>
</ul><!-- End dropdown-menu-->
</li><!-- End dropdown-->
</ul><!--End nav-->
</div><!-- End navbar-collapse-->
</div> <!-- End container-->
</div> <!-- End navbar-->
您还可以在此处查看导航栏：www.tomas-nosek.moxo.cz。只需重新设置浏览器窗口，您就会看到我遇到的问题。
答案 0 :(得分：2)
试试这个，
将此<div class="visible-xs clearfix"></div>添加到<a class="navbar-brand" href="index.html">FUTURE LOGO</a>
这可以清除小型设备上的浮动css，
<div class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">FUTURE LOGO</a>
<div class="visible-xs clearfix"></div>
<div class="navbar-collapse navbar-responsive-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span> Domu</a></li>
<li><a href="obsahmp.html">Obsah MP</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Responzivní webdesign<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li><a href="responzivniwebdesign.html">Co to vlastně je?</a></li>
<li><a href="webovarozvrzeni.html">Webová rozvržení</a></li>
<li><a href="">Tvorba responzivního webu</a></li>
<li class="divider"></li>
<li class="dropdown-header">CSS frameworky</li>
<li><a href="#">Co, jak a proč?</a></li>
<li><a href="#">Twitter bootstrap</a></li>
</ul><!-- End dropdown-menu-->
</li><!-- End dropdown-->
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Použité komponenty<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li><a href="navbar.html">Navbar</a></li>
<li><a href="dropdown.html">Dropdown</a></li>
<li><a href="carousel.html">Carousel</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown-header</li>
<li><a href="#">Subsection</a></li>
<li><a href="#">Subsection</a></li>
</ul><!-- End dropdown-menu-->
</li><!-- End dropdown-->
</ul><!--End nav-->
</div><!-- End navbar-collapse-->
</div> <!-- End container-->
</div> <!-- End navbar-->
<强> Demo
答案 1 :(得分：0)
您想在移动设备的导航栏中添加“clear：left”。 也可以使用菜单将'col-xs-12'作为类添加到容器中。
基本上你必须将菜单分成新的一行。