Question

导航栏在大型桌面上运行良好，但如果浏览器大小介于大约781px和1005像素之间，则li标签链接不适合导航栏并导致重叠或分成两个“线”（例如“Kontakt”） “）。您可以在导航栏的屏幕截图中看到它。

屏幕截图：http://s14.directupload.net/images/140517/5ov7sr5v.png

我在Joomla 3.3上使用Bootstrap和LESS模板。

这是一些代码。

HTML：

<!-- NAVBAR -->
<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
     <?php /* <a class="navbar-brand" href="<?php echo $this->baseurl; ?>"><?php echo $siteName; ?></a> */ ?>
    </div>
    <div class="navbar-collapse collapse">
        <jdoc:include type="modules" name="mainmenu" />
    </div><!--/.nav-collapse -->
</nav><!--/ .navbar navbar-default -->

<jdoc:include type="modules" name="mainmenu" />抛出<ul class="nav navbar-nav menu"> 对于第二级（下拉列表）：<ul class="dropdown-menu nav-child unstyled small">

JavaScript的：

        // bootstrap dropdown menu
    $('.navbar .parent > a').addClass('dropdown-toggle');
    $('.navbar .dropdown-toggle').attr('data-toggle','dropdown');
    $('.navbar .dropdown-toggle').append(' <b class="caret"></b>');

Template.less：

.navbar {
background-image:url(../images/menu_bg.png);
background-repeat:repeat-x;
margin-bottom: 0;
font-size: @font-size-base;
border-radius:0;

ul {
    li {

        border-right:1px solid @navbar-default-border;

        &:hover {

        }

        a {

            &:first-child {

            }
            &:last-child {
                border-right:none;
            }
        }
    }
} //.ul

} //。navbar

我没有更改变量中的任何大小属性。 @ grid-float-breakpoint：@ screen-sm-min; @ grid-float-breakpoint-max：（@ grid-float-breakpoint - 1）;

如何解决此问题？重要的是，该网站具有响应性。

另一个问题是切换按钮。它出现了，如果我点击它就可以工作，但我不能再点击它让菜单消失。

Answer 1

从图片中可以看出，您只是拥有太多的导航项目以适应页面的宽度。尝试使用@media查询来定位.nav > li > a上的填充，这样当您缩小页面时，它会减少padding

min和max宽度只是默认尺寸。我添加了min，因为在768px下面，Bootstraps折叠菜单应该会启动。

@media only screen and (max-device-width : 1224px)
                   and (min-device-width : 768px) {

    .nav {
        > li {
            > a {
                /* Default - padding: 10px 15px;*/
                padding: 10px 12px;
            }
        }
    }

}

Bootstrap：Navbar没有响应：sm-sizes的重叠/断点

1 个答案: