html - 导航栏中的中心菜单项响应

Question

我是一个 Bootstrap 初学者。我想构建一个模板，其中有六个带有品牌标志的菜单。 Logo 正好位于菜单结构的中间。在 6 个菜单中，3 个菜单位于其右侧，其他 3 个菜单位于左侧。像这样 :



我遵循了在 Twitter bootstrap 文档中声明的 menu 的一般标记结构。

对于平板电脑屏幕(col-sm-)，我的菜单结构应涵盖完整的 12 个网格。屏幕分辨率，即高于平板电脑，即 Bootstrap 语言中的 col-md 和 col-lg，应仅覆盖 11 个偏移量为 1 的网格。

我已经相应地添加了我的标记。[Html 选项卡中的第 6 行]。

我的问题:

在大屏幕分辨率下，它看起来不错。 Bt 在一定的分辨率下，大多低于 1024 像素，一些菜单只是进入下一行，因为它们没有响应。(只需调整我的 js fiddle 链接的 js fiddle 结果窗口的大小即可知道问题。我在下面分享了我的 js fiddle Logo )这个是我的问题吧。

当我将视口(viewport)更改为较小的屏幕(直到平板电脑屏幕)时，我的所有菜单 Logo 和品牌 Logo 以及文本都应该响应。谁能帮我制作响应式的文本、菜单标志和品牌标志？我已在品牌 Logo 中添加了 img-responsive 类，但似乎那不起作用。

我想要的是:

我的所有品牌菜单，应该在所有平板电脑屏幕和比它分辨率更高的屏幕中保持在一行。

对于更高分辨率的屏幕，菜单应位于标题部分的中心，因此应具有至少 1 个 col 偏移值，即 col-md-offset-1。对于平板电脑屏幕，我的列标记应该是 col-sm-12 ，没有偏移值。 (不要考虑 -xs- 屏幕。我对 -xs- 屏幕没有任何问题)

我的 JS fiddle 链接: http://jsfiddle.net/swapnaranjita_nayak/7bHfJ/

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default menu" role="navigation">
    <div class="container">
        <div class="row">
            <div class="col-md-11 col-md-offset-1 col-sm-12 col-sm-offset-0 text-center">
                <!-- 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>
                <!-- 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 ">
                        <!-- 1st Menu -->
                        <li> <a href="http://imgur.com/WepWP6j" class="text-center"><img src="http://i.imgur.com/WepWP6j.png" title="Hosted by imgur.com" /></a> Menu 1</li>
                        <!-- 2nd Menu -->
                        <li> <a href="http://imgur.com/WepWP6j"><img src="http://i.imgur.com/WepWP6j.png" title="Hosted by imgur.com" /></a> Menu2</li>
                        <!-- 3rd Menu -->
                        <li> <a href="http://imgur.com/WepWP6j"><img src="http://i.imgur.com/WepWP6j.png" title="Hosted by imgur.com" /></a> Menu 3</li>
                        <!-- Middle Navigation Link logo -->
                        <li class="hidden-xs"><a class="navbar-brand img-responsive" href="http://imgur.com/D6RHfjf"><img src="http://i.imgur.com/D6RHfjf.png" title="Hosted by imgur.com" /></a>
                        </li>
                        <!-- 4th Menu -->
                        <li> <a href="http://imgur.com/WepWP6j"><img src="http://i.imgur.com/WepWP6j.png" title="Hosted by imgur.com" /></a> Menu 4</li>
                        <!-- 5th Menu -->
                        <li> <a href="http://imgur.com/WepWP6j"><img src="http://i.imgur.com/WepWP6j.png" title="Hosted by imgur.com" /></a> Menu 5</li>
                        <!-- 6th Menu -->
                        <li> <a href="http://imgur.com/WepWP6j"><img src="http://i.imgur.com/WepWP6j.png" title="Hosted by imgur.com" /></a> Menu 6</li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <!-- /.navbar-collapse -->
            </div>
        </div>
        <!-- row -->
    </div>
    <!-- /.container-fluid -->
</nav>

css

@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');

Answer 1

添加这几行 CSS 以使您的菜单链接居中:

/* float:none is important to center the elements */
.navbar-header{
float: none;
display: inline-block;
}

/* this is needed so that the toggle button remains on the right */
button.navbar-toggle{
position: absolute;
right: 5px;
top: 0;
}

/* much of your menu links go to the next line because of the padding space */
.navbar-collapse{
    padding-right: 0px;
    padding-left:0px;
}

/* again, reducing the padding space */
.nav>li>a {
    padding: 10px 10px;
}

/* this is to remove the vertical scrollbar when the viewport is smaller */
.collapse.in{
display: inline;
}

同时删除 .container div 因为它放在填充空间中，您可能应该删除 col-*-offset-*也。

这是 demo ( jsfiddle ) 了解上述更改后的外观。