Bootstrap header - 更改 position/size 徽标

Question

我开始制作自己的第一个网站，我使用的是 bootstrap 的 header/navbar。现在我有两个问题：

我不知道如何更改徽标的大小，它应该与 header 大小相同，如果我添加一个小徽标（大小与 header ), 我不知道如何使它位于 header 的中间（header 的顶部和底部之间的距离应该相同）。
如果header包含太多链接或网站名称太长，它有两行。我应该改变什么，内容在同一行？

有图片更易理解：

What it should look like (Imgur) 对不起，如果我的英语不是最好的:) 我的代码：

/* header */
header.nav-header {
 border-bottom: 1px solid #eee;
 width: 100%;
 z-index: 998;
    position: fixed;

}

/* navigation */
nav.navbar-custom {
 background: #999999; /*000000*/
 border: 0;
 border-radius: 0;
 font-family: Raleway;
 margin: 0;
 text-transform: uppercase;
}
nav.navbar-custom div.navbar-header a.navbar-brand,
nav.navbar-custom div.navbar-header a.navbar-brand:link {
 color: #222; /*ffffff*/
 font-family: Poiret One;
 font-size: 22px;
    font-weight: 700;
 letter-spacing: 3px;
}
nav.navbar-custom ul.navbar-nav li a,
nav.navbar-custom ul.navbar-nav li a:link {
 color: #222; /*ffffff*/
 font-size: 17px;
 letter-spacing: 3px;
 outline: 0;
}
nav.navbar-custom ul.navbar-nav li a:active,
nav.navbar-custom ul.navbar-nav li a:hover,
nav.navbar-custom ul.navbar-nav li a:focus {
 background: none;
 color: #00FF00;
 outline: 0;
}
nav.navbar-custom ul.navbar-nav li#current a:visited{
    color: #00FF00
}

  <!-- header -->
        <header class="nav-header">
            <nav class="navbar navbar-custom" role="navigation">
                <div class="container">
                    <div class="navbar-header">                        
                        <a class="navbar-brand" id="logo" href="index.html"></a>
                        <a class="navbar-brand" href="index.html">W E B S I T E 1 2 3 4 5 6. x y z</a>
                    </div>
                    <div class="collapse navbar-collapse" id="custom-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li id="current"><a href="index.html">Home</a></li>
                            <li><a href="">Link 1</a></li>
                            <li><a href="">Link 2</a></li>
                            <li><a href="">Link 3</a></li>
                            <li><a href="">Link 4</a></li>
       <li><a href="">Link 1 2 3 4 5</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>

Answer 1

您可以使用背景图片标签轻松声明徽标的大小，并且就您的菜单而言，有很多选项：

*更改字体大小。 *对某些链接使用下拉列表。 *随着视口的变化改变网站字体的大小。

我还为移动导航添加了缺少的HTML。

/* header */

header.nav-header {
  border-bottom: 1px solid #eee;
  width: 100%;
  z-index: 998;
  position: fixed;
}
/* navigation */

nav.navbar-custom {
  background: #999999;
  /*000000*/
  border: 0;
  border-radius: 0;
  font-family: Raleway;
  margin: 0;
  text-transform: uppercase;
}
nav.navbar-custom div.navbar-header a.navbar-brand,
nav.navbar-custom div.navbar-header a.navbar-brand:link {
  color: #222;
  /*ffffff*/
  font-family: Poiret One;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 3px;
}
.nav-header .navbar-brand#logo {
  background: url('https://static.acquitygroup.com/images/default-source/work/motorola-logo.png?sfvrsn=4');
  height: 50px;
  width: 50px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 10px;
}
nav.navbar-custom ul.navbar-nav li a,
nav.navbar-custom ul.navbar-nav li a:link {
  color: #222;
  /*ffffff*/
  font-size: 15px;
  letter-spacing: 3px;
  outline: 0;
}
nav.navbar-custom ul.navbar-nav li a:active,
nav.navbar-custom ul.navbar-nav li a:hover,
nav.navbar-custom ul.navbar-nav li a:focus {
  background: none;
  color: #00FF00;
  outline: 0;
}
nav.navbar-custom ul.navbar-nav li#current a:visited {
  color: #00FF00;
}
@media (max-width: 600px) {
  nav.navbar-custom div.navbar-header #brand {
    font-size: 15px;
    letter-spacing: 0;
  }
}
@media (max-width: 360px) {
  nav.navbar-custom div.navbar-header #brand {
    display: none;
  }
}

<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" />
<header class="nav-header">
  <nav class="navbar navbar-default navbar-custom">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <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" id="logo" href="index.html"></a>
        <a class="navbar-brand" id="brand" href="index.html">W E B S I T E 1 2 3 4 5 6. x y z</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 navbar-right">
          <li id="current"><a href="index.html">Home</a>

          </li>
          <li><a href="">Link</a>

          </li>
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Links <span class="caret"></span></a>

            <ul class="dropdown-menu">
              <li><a href="">Link 2</a>

              </li>
              <li><a href="">Link 3</a>

              </li>
              <li><a href="">Link 4</a>

              </li>
              <li><a href="">Link 1 2 3 4 5</a>

              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
</header>

Bootstrap header - 更改 position/size 徽标

Bootstrap header - change position/size of logo

html

css

header

twitter-bootstrap