Question

我开始创建自己的第一个网站，而我正在使用bootstrap中的标题/导航栏。现在我有两个问题：

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

有图片让它更容易理解：

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标题 - 更改徽标的位置/大小

1 个答案: