如何使导航以屏幕大小为中心、展开和缩放答案

【问题标题】：How to make navigation centered, spreaded and and scales with screen size如何使导航以屏幕大小为中心、展开和缩放
【发布时间】：2016-12-14 14:18:20
【问题描述】：

我正在为我的布局使用引导程序创建一个投资组合网站，但是除了我想让顶部导航缩放并在所有设备上保持居中（每个项目均占宽度的百分比）之外，一切都很好。（类似于 apple.com）

这是我的 index.html

<!DOCTYPE html>

<html>

  <head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="header">
      <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" id="navbarToggle" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" 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" ui-sref="app" style="padding:0 0 0 10px;">
                <img alt="Brand" class="img-responsive" src="image url here" />
              </a>
          </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="collapsable-nav">
            <ul class="nav navbar-nav">
              <li ui-sref-active="active">
                <a ui-sref="home" class="first">Home                                                                        <span class="sr-only">(current)</span>
                </a>
              </li>
              <li ui-sref-active="active">
                <a ui-sref="projects">Projects</a>
              </li>
              <li ui-sref-active="active">
                <a ui-sref="about">About</a>
              </li>
              <li ui-sref-active="active">
                <a ui-sref="contact">Contact</a>
              </li>
              <li ui-sref-active="active">
                <a ui-sref="awards">Awards</a>
              </li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
      </nav>
    </div>
  </body>

</html>

这是我的风格：

.navbar-brand > img {
    width: auto;
    height: 44px;
    max-width: 100%;
    min-width: 60px;
    position: absolute;
    left: 5px;
}

ul.navbar-nav {
  list-style-type: none;
  text-align: justify;
}
ul.navbar-nav > li {
  margin: 0 auto;
  content: '';
  max-width: 100;
  width: auto;
  display: inline-block;
} 
ul.navbar-nav > li > a {
  margin: 0 auto;
  content: '';
  max-width: 100;
  width: auto;
  display: inline-block;
}

这是我的 plunker 编辑器：

https://plnkr.co/edit/bXOx4mwzdbFwEYRtdNd6?p=preview

这是我的 plunker 全屏（让您更容易测试和更改屏幕尺寸）

https://run.plnkr.co/ZPgTeuYZA2LYl7Et/

提前致谢。

【问题讨论】：

标签： twitter-bootstrap navigation nav

【解决方案1】：

制作顶部导航刻度：Bootstrap docs的基本模板中有说明：

复制下面的 HTML 以开始使用最小的 Bootstrap 文档：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

将float:none 添加到ul.navbar-nav 并将width: 19%; 更改为ul.navbar-nav > li：

.navbar-brand > img {
    width: auto;
    height: 44px;
    max-width: 100%;
    min-width: 60px;
    position: absolute;
    left: 5px;
}

ul.navbar-nav {
  list-style-type: none;
  text-align: center;
  float: none;
}
ul.navbar-nav > li {
  margin: 0 auto;
  max-width: 100;
  width: 19%;
  display: inline-block;
}

我删除了ul.navbar-nav > li > a，它既不影响商品顺序也不影响公共标记。

【讨论】：

ok Banzy，谢谢你……我可以管理缩放，但我需要每个项目在所有尺寸上均等地占据页面的一部分。
'已经改变了答案
太好了，因为这个答案也可以帮助其他人，你能不能试着从 > li (s) 和 > li> a (s) 中删除重复的样式，你能告诉我吗应该为每个属性分配什么属性，因为这是一个混乱的问题