在Bootstrap导航栏的中心对齐文本

迈克尔·麦克古克

我想将“入门”链接移至导航栏的中间,而不是向左对齐。我该怎么做呢?

我的jsFiddle在这里

HTML:

<div class="container">
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Bootstrap 3</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-center">
                <li class="dropdown active">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Getting started <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://getbootstrap.com/getting-started/#download">Download Bootstrap</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Examples</li>
                        <li><a href="http://getbootstrap.com/getting-started/#template">Basic template</a></li>
                        <li><a href="http://getbootstrap.com/examples/starter-template/">Starter template</a></li>
                        <li><a href="http://getbootstrap.com/examples/grid/">Grids</a></li>
                        <li><a href="http://getbootstrap.com/examples/jumbotron/">Jumbotron</a></li>
                        <li><a href="http://getbootstrap.com/examples/navbar/">Navbar</a></li>
                        <li><a href="http://getbootstrap.com/examples/signin/">Sign-in page</a></li>
                        <li><a href="http://getbootstrap.com/examples/sticky-footer/">Sticky footer</a></li>
                        <li><a href="http://getbootstrap.com/examples/offcanvas/">Offcanvas</a></li>
                        <li><a href="http://getbootstrap.com/examples/carousel/">Carousel</a></li>
                        <li><a href="http://getbootstrap.com/examples/theme/">Theme</a></li>                        
                        <li class="divider"></li>
                        <li class="dropdown-header">Compatibility</li>
                        <li><a href="http://getbootstrap.com/getting-started/#migration">Migrating from 2.x to 3.0</a></li>
                        <li><a href="http://getbootstrap.com/getting-started/#browsers">Browser support</a></li>
                        <li><a href="http://getbootstrap.com/getting-started/#third-parties">Third party support</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="http://getbootstrap.com/customize">Customize</a></li>
            </ul>
        </div>
    </div>

    <div class="jumbotron">
        <h1>Twitter Bootstrap 3.0</h1>
        <p class="lead">Starter template with CSS and JS included.</p>
        <p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a></p>
      </div>
</div>
matthias_h

您可以居中添加text-align:center到包含父项的导航栏,并设置要居中的导航栏,display:inline-block然后删除float:left

.navbar-default{
  text-align:center;
}
.navbar-center{
   display: inline-block;
   float: none; 
}

调整小提琴

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

中心对齐在导航栏上的 Bootstrap 上不起作用

来自分类Dev

导航栏的 Bootstrap 对齐中心折叠项目

来自分类Dev

如何在 Bootstrap 4 导航栏导航项中创建对齐中心和下方图标的小文本而不影响导航栏高度?

来自分类Dev

如何使导航栏与中心对齐

来自分类Dev

导航栏文本的中心,并右对齐。缩小页面大小时也保持导航栏完好无损

来自分类Dev

Bootstrap-导航栏中的中心文本和搜索字段

来自分类Dev

将Bootstrap导航对齐中心

来自分类Dev

Bootstrap导航栏中心项目

来自分类Dev

导航栏-按钮不在中心对齐

来自分类Dev

导航栏-按钮不在中心对齐

来自分类Dev

在同一行中左对齐徽标文本和中心导航栏

来自分类Dev

Bootstrap:在导航栏中对齐导航

来自分类Dev

引导导航栏中的中心文本

来自分类Dev

引导导航栏中的中心文本

来自分类Dev

Twitter Bootstrap 3.0.3导航栏对齐导航栏标题

来自分类Dev

Twitter Bootstrap 3.0.3导航栏对齐导航栏标题

来自分类Dev

Bootstrap导航栏右对齐按钮

来自分类Dev

导航栏中的 bootstrap 4 按钮对齐

来自分类Dev

导航栏文本元素未垂直对齐(CSS / Bootstrap)

来自分类Dev

Bootstrap页脚中的文本与中心对齐

来自分类Dev

Bootstrap 4 中心图像但文本左对齐

来自分类Dev

将导航栏中的内容与bootsrap中的位置中心对齐

来自分类Dev

我的导航栏不会与页面中心对齐?

来自分类Dev

对齐导航引导中心

来自分类Dev

更改导航栏文本颜色Bootstrap

来自分类Dev

Bootstrap导航栏不尊重文本颜色

来自分类Dev

Bootstrap导航栏上的文本输入

来自分类Dev

Bootstrap 4导航栏,文本居中

来自分类Dev

Bootstrap导航栏不尊重文本颜色

Related 相关文章

热门标签

归档