Question

我正在使用Boostrap的导航栏，其中有一个图像品牌（响应）和一些文本（菜单项）。我想将文本放在div中，但我不知道如何：如果我将文本放在CSS中心，显示器的左角和＆＃34; Home＆＃34之间会有更多的空间。 ;并且最后一个＆＃34; Link＆＃34;之间的空间更小。在显示器的右上角和右下角。好像我的代码采用div大小，减去图像大小并将文本置于剩余空间中心。

我考虑过设置一个负的左边距，但由于图像是响应的，我不知道给予什么价值。

你能帮帮我吗？ http://jsfiddle.net/a001dxn6/2/

HTML

    <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#"><img src="official_logo.png" /></a>
        </div>

        <!-- 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">
                <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Specialità <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#"></a>
                        </li>
                        <li><a href="#">La pizza napoletana</a></li>
                        <li><a href="#">Le specialità della casa</a></li>
                    </ul>
                </li>
                <li><a href="">Menu</a></li>
                <li><a href="#">Eventi</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contatti</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

CSS

.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}

.navbar-default {
background-color: transparent;
border-color: darkorange;
text-align: center;
}

.navbar-brand > img {
max-height: 100%;
max-width: 100%;
}

Answer 1

[固定]只需添加CSS：.navbar-brand { position: fixed; left: 1vw; }

Answer 2

无法用小提琴测试，因为没有图像。

您是否尝试从text-aling: center课程中删除.navbar 并添加：

.dropdown, .dropdown-menu{
    text-align: center;
}

？让我知道它是否有效。

如何在Bootstrap3中将响应图像旁边的文本居中

2 个答案: