Question

我正在制作一个使用bootstrap作为我的布局的投资组合网站，但是一切都很好，除了我想在所有设备上制作顶部导航比例并保持居中（每个项目占据宽度的一定百分比）。（像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;
}

这是我的编辑：

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

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

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

提前致谢。

Answer 1

要制作顶级导航比例：Bootstrap文档的基本模板中有说明：

复制下面的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，它既不影响商品订单也不影响常见商标。

如何使导航居中，展开和缩放屏幕尺寸

1 个答案: