使用bootstrap将菜单作为页面的中心

Question

这可能是一个愚蠢的问题，但我仍然在努力解决这个问题。我创建了一个页面，我想制作菜单中心。我使用了偏移，但是将菜单推到了中心，它使页面能够滚动到一边。

我的HTML

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
	<div class="container">
		<div class="row">
			<div class="col-lg-12 col-lg-offset-2">
				<nav class="navbar navbar-default">
					<div class="container-fluid">
						<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>
						</div>

						<div class="collapse navbar-collapse main_menu" id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav">
								<li class="current"><a href="index.html">Home</a></li>
								<li><a href="about.html">About</a></li>
								<li><a href="gallery.html">Gallery</a></li>
								<li><a href="pricing.html">Pricing</a></li>
								<li><a href="contact.html">Contact</a></li>
							</ul>
						</div>
					</div>
				</nav>
			</div>
		</div>
	</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

有两种方法：

1. 只需将css规则text-align:center;添加到您的无序列表中。

CSS示例

.center
{
  text-align: center;
}

1. 使用引导类text-center

  

虽然您已经在使用Bootstrap id，但两者都做同样的事情   选择2。

您更新的代码段（示例）

.center {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <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>
          </div>
          <div class="collapse navbar-collapse main_menu" id="bs-example-navbar-collapse-1">
            <!-- center and text-center classes added to '<ul>' element !-->
            <ul class="nav navbar-nav center text-center">
              <li class="current"><a href="index.html">Home</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="gallery.html">Gallery</a></li>
              <li><a href="pricing.html">Pricing</a></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </div>
</div>

Answer 2

在您的class属性中使用 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container text-center"> <div class="row"> <div class="col-lg-12"> <nav class="navbar navbar-default"> <div class="container-fluid"> <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> </div> <div class="collapse navbar-collapse main_menu" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="current"><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="pricing.html">Pricing</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> </nav> </div> </div> </div>。它已经内置到bootstrap中。

{{1}}