javascript - Bootstrap 导航栏品牌无法将文本放在两行上并做出响应

Question

我设计了一个响应式 Bootstrap 页面，但是当我尝试在开始时使用代码(导航栏)来制作它时，我卡住了。我在“a.navbar-brand”中放置了两个内衬文本，但它不会垂直居中且响应迅速。当我在寻找答案时，似乎没有人以某种方式使它对我有用。我正在寻找一个答案，它不是用填充和边距制作的，而是用一些响应代码制作的。如果有人能告诉我该怎么做，请告诉我。

这是我的 .png 版本的导航栏: Initial one

下面是我的代码: Made with code

<header>
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<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="#">KrasiStoyanov <small>Front End Developer</small></a>
				</div>
				
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">				
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#">Home</a></li>
						<li><a href="#">Portfolio</a></li>
						<li><a href="#">Newsletter</a></li>
						<li><a href="#">About</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</header>

@font-face {
  font-family: 'jaapokki_enchanceregular';
  src: url('type/jaapokkienchance-regular-webfont.eot');
  src: url('type/jaapokkienchance-regular-webfont.eot?#iefix') format('embedded-opentype'), url('type/jaapokkienchance-regular-webfont.woff2') format('woff2'), url('type/jaapokkienchance-regular-webfont.woff') format('woff'), url('type/jaapokkienchance-regular-webfont.ttf') format('truetype'), url('type/jaapokkienchance-regular-webfont.svg#jaapokki_enchanceregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  background-color: #f2f2f2;
  font-family: 'Century Gothic';
  font-size: 16px;
}
header {
  width: 100%;
}
header nav.navbar {
  width: 100%;
  height: 100px;
  border: 0;
  border-radius: 0;
  background-color: #54c0b0;
}
header nav.navbar div.container-fluid {
  width: 72%;
  height: 100%;
}
header nav.navbar div.container-fluid div.navbar-header {
  font-family: 'jaapokki_enchanceregular';
}
header nav.navbar div.container-fluid div.navbar-header a.navbar-brand {
  line-height: 1;
  color: #ffffff;
  font-size: 1.500em;
  text-transform: uppercase;
}
header nav.navbar div.container-fluid div.navbar-header a.navbar-brand small {
  display: block;
  font-size: 0.650em;
  font-family: 'Century Gothic';
  text-transform: capitalize;
}

这是我的代码。请任何人..帮助我。

Answer 1

查看我的 JSfiddle

您不正确的三件事:

1. navbar-brand 的行高是 1，这是导致它的原因在顶部对齐。

2. 为菜单中的每个 li a 元素设置增加的填充。

3. 总是写更短的代码。您不需要从根开始编写 CSS 规则元素。到父元素就够了。