Question

我是一名自助初学者。我想建立一个模板，我有六个带有品牌标识的菜单。徽标正好位于菜单结构的中间。在6个菜单中，3个菜单位于其右侧，其他3个菜单位于左侧。像这样：

enter image description here

我已经按照菜单的一般标记结构，在Twitter bootstrap的文档中声明。

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

我已相应添加了我的标记。[Html标签中的第6行]。

我的问题：

在大屏幕分辨率下，它看起来不错。 Bt在某个分辨率下，大多数在1024像素以下，有些菜单只是来到下一行，因为它们没有表现出任何反应。（只需调整我的js小提琴链接的js小提琴结果窗口以了解问题。我已经在下面分享了我的js小提琴徽标）是我的问题。

当我将视口更改为较小的屏幕（Upto平板电脑屏幕）时，我的所有菜单徽标和品牌徽标以及文本都应该响应。任何人都可以帮我制作文字，菜单标识和品牌标识，反应灵敏吗？我已经为品牌标识添加了img-responsive类，但似乎没有用。

我想要的是什么：

我的所有菜单都应该在所有平板电脑屏幕上保持一行，并且屏幕的分辨率要高于它。

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

我的JS fIDDLE LINK：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），看看它是如何看待上述变化的。

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

HTML

CSS

1 个答案: