Question

我为客户建立网站并遇到一些问题。我有一个固定的顶部和左侧菜单，一切都在移动布局中非常好用。但是，当我使用桌面分辨率并隐藏左侧菜单时，顶部菜单中的导航似乎更改为右对齐（然后当我缩小分辨率时，链接下拉并且菜单大小翻倍）。我为它做了一个div id，但我唯一真正使用的是margin-left来给我的搜索栏空间。

任何人都可以帮助我???该网站是：http://104.193.173.104/modx/index.php?id=1

以下是我的顶级菜单的代码：

<div id="main-navbar" class="navbar navbar-inverse" role="navigation">

<!-- Left menu toggle button -->
<button type="button" id="main-menu-toggle">
    <i class="navbar-icon fa fa-bars icon"></i>
</button>

<div class="navbar-inner">

    <div class="navbar-header">
        <div class="nav navbar-nav" style="">
            <!-- SEARCH BAR -->
            [[$searchBar]]
        </div>

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collapse">
            <i class="navbar-icon fa fa-bars"></i>
        </button>
    </div>

    <div id="main-navbar-collapse" class="collapse navbar-collapse main-navbar-collapse">
        <div id="main-navigation-container">
            <!-- MAIN NAVIGATION -->
            [[Wayfinder? &startId=`8` &outerTpl=`outerTplTop` &innerTpl=`innerTplTop` &level=`2`]]

            <!-- LOGIN -->
            <div class="right clearfix">
                <ul class="nav navbar-nav pull-right right-navbar-nav">
                    <li><a href="#"><i class="dropdown-icon fa fa-sign-in"></i>&nbsp; Login</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

这里是顶级导航容器的CSS：

#main-navigation-container {
margin-left: 347px;
width: auto;
max-height: none;
}

我正在为我的CMS使用Bootstrap 3.3.6和ModX Revo。

提前感谢您的帮助！如果您需要我提供更多代码段，请告诉我。

Answer 1

Add the following CSS:

   .navbar-header{
    max-width: 200px;
    }

Bootstrap导航问题 - 响应问题

1 个答案: