HTML – Bootstrap导航问题 – 响应问题

2023年10月22日 96次阅读

我正在为客户建立一个网站并遇到一些问题.我有一个固定的顶部和左侧菜单,一切都在移动布局中非常好用.但是,当我使用桌面分辨率并隐藏左侧菜单时,顶部菜单中的导航似乎更改为右对齐(然后当我缩小分辨率时,链接下拉,菜单大小翻倍).我为它做了一个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.

在此先感谢您的帮助！如果您需要我提供更多代码段,请告诉我们.

最佳答案 添加以下CSS：

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