html - Bootstrap 3.3.6 导航栏 float 到中心

标签 html css twitter-bootstrap

我正在使用固定在页面顶部的 Bootstrap 导航栏(要遵循的代码)。我不想让导航栏横跨桌面上的整个页面，而是限制宽度并将其居中以适应内容。虽然我可以限制宽度，但我不知道如何在这样做之后将其居中；它只是卡在左边。到目前为止，我所有的搜索都没有结果。大多数人似乎都希望链接居中，这不是我的问题。

这是网站现在的样子(左边的导航栏) enter image description here

这是我希望它看起来(或多或少)的样子: enter image description here

这是我当前的代码(正是我认为相关的部分):

    <head>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="10" style="background-color: #FFF;">
    <nav class="navbar navbar-default navbar-fixed-top" style="max-width:950px;">
        <div class="container-fluid" style="background-color: #FFF; width: 100%; padding-top: 15px;text-align: center;">
            <div style="display: inline;padding-right: 10px;">
                <a href="#"><img src="/images/logo.png" style="position: relative; top: -12px;" /></a>
            </div>
            <div style="display: inline;">
                <div class="dropdown" style="display: inline;">
                    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Welcome, [NAME] <span class="caret"></span></button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                        <li role="presentation">
                            <a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp; My Profile</a>
                        </li>
                        <li role="presentation">
                            <a href="#"><span class="glyphicon glyphicon-envelope"></span>&nbsp; Messages <span class="badge pull-right">5</span></a>
                        </li>
                        <li role="presentation">
                            <a href="#"><span class="glyphicon glyphicon-usd"></span>&nbsp; Make A Payment</a>
                        </li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation"><a href="/?Action=Logoff" ><span class="glyphicon glyphicon-off"></span>&nbsp; Sign Out</a></li>
                    </ul>
                </div>

            </div>
            <div class="slogan" style="float: none;display:inline;white-space: nowrap;">[HEADER TEST]</div>
        </div>
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header" >
          <button type="button" class="navbar-toggle collapsed pull-left" 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="/images/logo.png" style="position: relative; top: -15px;height: 50px;"/></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="#">Dashboard</a></li-->
                <li><a href="/Dashboard.asp">Home</a></li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 1 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        [MENU]
                    </ul>
                </li>

                <li>
                    <a href="#">Marketing </a>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 2 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        [MENU]
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 3 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        [MENU]
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 4 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        [MENU]
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 5 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        [MENU]
                    </ul>
                </li>

                <div style="display: inline;position: relative; top: 10px;" class="SearchForm">
                    <div style="margin-right: 20px;" class="SearchForm">
                        <form method="get" action="search" style="display: inline;">
                            <input class="search_field" type="text" style=" margin: 0px;float: none; min-width: 22px; width: 22px;"
                              onFocus="this.style.width='150px';" onblur="this.style.width='22px';" />
                        </form>
                    </div>
                    <a href="#" target="_blank">
                        <img src="/images/social/facebook.png" style="border: 0px;background-color: #FFFFFF;border-radius:15px;"/>
                    </a>
                    <a href="#" target="_blank">
                        <img src="/images/social/twitter.png" style="border: 0px;background-color: #FFFFFF;border-radius:15px;"/>
                    </a>
                    <a href="#" target="_blank">
                        <img src="/images/social/linkedin.png" style="border: 0px;background-color: #FFFFFF;border-radius:15px;"/>
                    </a>
                </div>
            </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
</body>

最佳答案

添加 margin: auto; 到 nav div

nav{
  margin: auto;
  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body data-spy="scroll" data-target=".navbar" data-offset="10" style="background-color: #FFF;">
    <nav class="navbar navbar-default navbar-fixed-top" style="max-width:950px;">
        <div class="container-fluid" style="background-color: #FFF; width: 100%; padding-top: 15px;text-align: center;">
            <div style="display: inline;padding-right: 10px;">
                <a href="#"><img src="/images/logo.png" style="position: relative; top: -12px;" /></a>
            </div>
            <div style="display: inline;">
                <div class="dropdown" style="display: inline;">
                    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Welcome, [NAME] <span class="caret"></span></button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                        <li role="presentation">
                            <a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp; My Profile</a>
                        </li>
                        <li role="presentation">
                            <a href="#"><span class="glyphicon glyphicon-envelope"></span>&nbsp; Messages <span class="badge pull-right">5</span></a>
                        </li>
                        <li role="presentation">
                            <a href="#"><span class="glyphicon glyphicon-usd"></span>&nbsp; Make A Payment</a>
                        </li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation"><a href="/?Action=Logoff" ><span class="glyphicon glyphicon-off"></span>&nbsp; Sign Out</a></li>
                    </ul>
                </div>

            </div>
            <div class="slogan" style="float: none;display:inline;white-space: nowrap;">[HEADER TEST]</div>
        </div>
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header" >
          <button type="button" class="navbar-toggle collapsed pull-left" 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="/images/logo.png" style="position: relative; top: -15px;height: 50px;"/></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="#">Dashboard</a></li-->
                <li><a href="/Dashboard.asp">Home</a></li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 1 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        [MENU]
                    </ul>
                </li>

                <li>
                    <a href="#">Marketing </a>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 2 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        [MENU]
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 3 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        [MENU]
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 4 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        [MENU]
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 5 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        [MENU]
                    </ul>
                </li>

                <div style="display: inline;position: relative; top: 10px;" class="SearchForm">
                    <div style="margin-right: 20px;" class="SearchForm">
                        <form method="get" action="search" style="display: inline;">
                            <input class="search_field" type="text" style=" margin: 0px;float: none; min-width: 22px; width: 22px;"
                              onFocus="this.style.width='150px';" onblur="this.style.width='22px';" />
                        </form>
                    </div>
                    <a href="#" target="_blank">
                        <img src="/images/social/facebook.png" style="border: 0px;background-color: #FFFFFF;border-radius:15px;"/>
                    </a>
                    <a href="#" target="_blank">
                        <img src="/images/social/twitter.png" style="border: 0px;background-color: #FFFFFF;border-radius:15px;"/>
                    </a>
                    <a href="#" target="_blank">
                        <img src="/images/social/linkedin.png" style="border: 0px;background-color: #FFFFFF;border-radius:15px;"/>
                    </a>
                </div>
            </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    </body>

关于html - Bootstrap 3.3.6 导航栏 float 到中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35582585/

上一篇：html - 将 Bootstrap 粘性页脚与全高内容 DIV 相结合

下一篇：html - 为同一页中的两个表添加标题

相关文章：

html - 如何使用我的结构显示 slice 中的表格

css - Bootstrap Font Awesome 徽章与数字

javascript - 使可折叠标题正确自适应

php - 如何使用 JQUERY 设置复选框选中和未选中事件

javascript - 用按钮显示隐藏元素

html - 当有人悬停在一个 div 上时显示另一个 div

html - iOS 8 在 HTML 网络应用程序中嵌入 YouTube 失败

javascript - 基于Angular JS部分 View 动态更改标题

javascript - JS 和 HTML 不同的 Footer Render

html - 使用 Bootstrap 推拉类进行布局

©2024 IT工具网  联系我们