使用引导导航栏并希望使用 css 将链接居中 [英] Using bootstrap navigation bar and would like to center the links using css

问题描述

我正在使用引导程序导航栏，并且在导航中有我的链接.链接默认在左边.我能够将链接移动到页面中心的唯一方法是让 css 为第一个列表项提供 20em 的边距.我想让它针对不同尺寸的显示器进行调整，但是如果显示器更大，它仍然会居中.这是引导程序导航代码的一部分，其中包含我的链接和其下方的 css:

<!--<div class="container">--><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">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#">Chompsta</a>

<!-- 收集导航链接、表单和其他用于切换的内容--><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="margin-left"><a href="#">匿名聊天</a></li><li><a href="#">注册成名</a></li><li><a href="#">搜索主题</a></li><ul class="nav navbar-nav navbar-right"><li><div id="points">172</div></li></div><!--/.navbar-collapse --><!--</div>&lt;!&ndash;/.container-fluid &ndash;&gt;--></nav>***css.margin-left { margin-left: 20em;}

解决方案

这可能会解决您的问题或让您朝着正确的方向前进.这将使您的主要 navbar 链接居中，并使您的 navbar-right 保持在其位置.

@media (min-width: 768px) {.navbar .navbar-nav {显示:内联块；浮动:无；垂直对齐:顶部；}.navbar .navbar-collapse {文本对齐:居中；}}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/><nav class="navbar navbar-default"><!--<div class="container">--><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">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#">Chompsta</a>

<!-- 收集导航链接、表单和其他用于切换的内容--><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="margin-left"><a href="#">匿名聊天</a><li><a href="#">注册成名</a><li><a href="#">搜索主题</a><ul class="nav navbar-nav navbar-right"><li><a href="#"><div id="points">172</div></a>

<!--/.navbar-collapse --><!--</div>&lt;!&ndash;/.container-fluid &ndash;&gt;--></nav>

I am using the bootstrap navigation bar and I have my links in the nav. The links default to the left. The only way I am able to move the links to the center of the page is by making the css give the first list item a margin of 20em. I would like to have it adjust for different size monitors however so in the event the monitor is larger it will still be centered. Here is the portion of the bootstrap nav code with my links and the css below it:

<nav class="navbar navbar-default">
    <!--<div class="container">-->
      <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="#">Chompsta</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="margin-left"><a href="#">Chat anonymously</a></li>
          <li><a href="#">Register for fame</a></li>
          <li><a href="#">Search for topics</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><div id="points">172</div></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    <!--</div>&lt;!&ndash; /.container-fluid &ndash;&gt;-->
  </nav>

***
css

.margin-left { margin-left: 20em; }

解决方案

This might solve your problem or get you headed in the right direction. This will center your main navbar links and keep your navbar-right in it's position.

@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }
  .navbar .navbar-collapse {
    text-align: center;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <!--<div class="container">-->
  <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="#">Chompsta</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="margin-left"><a href="#">Chat anonymously</a>

      </li>
      <li><a href="#">Register for fame</a>

      </li>
      <li><a href="#">Search for topics</a>

      </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li>
        <a href="#">
          <div id="points">172</div>
        </a>

      </li>
    </ul>
  </div>
  <!-- /.navbar-collapse -->
  <!--</div>&lt;!&ndash; /.container-fluid &ndash;&gt;-->
</nav>

这篇关于使用引导导航栏并希望使用 css 将链接居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！