html - 在切换时更改导航栏品牌文本

Question

我在调整大小时使用 navbar-brand 时遇到问题。我正在使用最新的 bootstrap CSS ( getbootstrap.com )。我无法显示我想要的文本。即，当我调整浏览器大小时，导航栏中的“品牌文本”保持不变。

当我调整浏览器大小时，我真正想要的是 h4 <h4 class=navbar-brand visible-xs href=#>GCS</h4>要显示的标签而不是“a”标签 <a class=navbar-brand hidden-xs href=#><em>Gujarat</em> Chhatra Sansad<span class=logo-s></span></a>在菜单中。

这是一些 html 和 css 代码。

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: transparent;
}
.navbar-default {
  background-color: transparent;
  border-color: transparent;
}
.navbar-default .navbar-toggle {
  border-color: transparent;
  margin-top: 40px;
  color: #fff;
  background-color: #03A9F4;
  font-size: 18px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  font-size: 18px;
  color: #fff;
  background-color: #03A9F4;
}
header.site-header {
  background-color: #fff;
  padding-bottom: 150px;
}
.logo-wrapper {
  margin-top: 30px;
  position: relative;
  z-index: 10;
}
.logo-wrapper a.navbar-brand {
  position: relative;
  background-color: #fff;
  padding: 0 20px;
  margin: 0 !important;
  height: 80px;
  line-height: 80px;
  font-size: 1.4em;
  font-weight: 300;
  text-transform: uppercase;
  display: inline-block;
  -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
.logo-wrapper a.navbar-brand em {
  font-style: normal;
  color: #777;
}
.logo-wrapper a.navbar-brand:hover {
  background-color: #fff;
}

.logo-wrapper .logo-s {
  position: absolute;
  right: 0;
  top: 0;
  background: url(../images/logo-s.png) no-repeat;
  margin-right: -99px;
  margin-top: -19px;
  width: 122px;
  height: 122px;
}
.navbar-nav.navbar-right:last-child {
  margin-right: 0;
}
#main-menu ul {
  position: relative;
  z-index: 9;
  margin-top: 30px;
  height: 80px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
#main-menu ul .nav-s {
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/nav.png) no-repeat;
  margin-left: -99px;
  margin-top: -23px;
  width: 122px;
  height: 122px;
}
#main-menu ul li a {
  padding: 0;
  margin: 0 35px;
  line-height: 80px;
  font-size: 12px;
  font-weight: 300;
  text-transform: uppercase;
}
#main-menu ul li a:hover {
  color: #f55858;
}
#main-menu ul li:first-child {
  margin-left: 30px;
}
#main-menu ul li:last-child {
  margin-right: 30px;
}
#main-menu ul li.active a {
  background: transparent;
  color: #f55858;
}

<nav class="navbar navbar-default navbar-fixed-top">
<div class=container>
<div class=row>
<div class=navbar-header>
<button class=navbar-toggle type=button data-toggle=collapse data-target=#main-menu>
<span class=sr-only>Toggle navigation</span>
<i class="fa fa-bars"></i>
</button>
<div class=logo-wrapper>
<a class=navbar-brand hidden-xs href=#>
<em>Gujarat</em> Chhatra Sansad
<span class=logo-s></span>
</a>
<h4 class=navbar-brand visible-xs href=#>GCS</h4>
</div>
</div>
<div class="collapse navbar-collapse" id=main-menu>
<ul class="nav navbar-nav navbar-right">
<span class=nav-s></span>
<li class=active><a href=#top>Home</a></li>
<li><a href=#product-inner>Mission</a></li>
<li><a href=#portfolio>Sponsors</a></li>
<li><a href=#promotion>Register</a></li>
<li><a href=#contact>Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>

Answer 1

您在这里遗漏了一些双引号 --> <a class="navbar-brand hidden-xs" href=#> ，现在应该锻炼了。

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 .navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: transparent;
}
.navbar-default {
  background-color: transparent;
  border-color: transparent;
}
.navbar-default .navbar-toggle {
  border-color: transparent;
  margin-top: 40px;
  color: #fff;
  background-color: #03A9F4;
  font-size: 18px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  font-size: 18px;
  color: #fff;
  background-color: #03A9F4;
}
header.site-header {
  background-color: #fff;
  padding-bottom: 150px;
}
.logo-wrapper {
  margin-top: 30px;
  position: relative;
  z-index: 10;
}
.logo-wrapper a.navbar-brand {
  position: relative;
  background-color: #fff;
  padding: 0 20px;
  margin: 0 !important;
  height: 80px;
  line-height: 80px;
  font-size: 1.4em;
  font-weight: 300;
  text-transform: uppercase;
  display: inline-block;
  -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
.logo-wrapper a.navbar-brand em {
  font-style: normal;
  color: #777;
}
.logo-wrapper a.navbar-brand:hover {
  background-color: #fff;
}
.logo-wrapper .logo-s {
  position: absolute;
  right: 0;
  top: 0;
  background: url(../images/logo-s.png) no-repeat;
  margin-right: -99px;
  margin-top: -19px;
  width: 122px;
  height: 122px;
}
.navbar-nav.navbar-right:last-child {
  margin-right: 0;
}
#main-menu ul {
  position: relative;
  z-index: 9;
  margin-top: 30px;
  height: 80px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
#main-menu ul .nav-s {
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/nav.png) no-repeat;
  margin-left: -99px;
  margin-top: -23px;
  width: 122px;
  height: 122px;
}
#main-menu ul li a {
  padding: 0;
  margin: 0 35px;
  line-height: 80px;
  font-size: 12px;
  font-weight: 300;
  text-transform: uppercase;
}
#main-menu ul li a:hover {
  color: #f55858;
}
#main-menu ul li:first-child {
  margin-left: 30px;
}
#main-menu ul li:last-child {
  margin-right: 30px;
}
#main-menu ul li.active a {
  background: transparent;
  color: #f55858;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class=container>
    <div class=row>
      <div class=navbar-header>
        <button class=navbar-toggle type=button data-toggle=collapse data-target=#main-menu>
          <span class=sr-only>Toggle navigation</span>
          <i class="fa fa-bars"></i>
        </button>
        <div class=logo-wrapper>
          <a class="navbar-brand hidden-xs" href=#>
            <em>Gujarat</em> Chhatra Sansad
            <span class=logo-s></span>
          </a>
          <h4 class="navbar-brand visible-xs" href=#>GCS</h4>
        </div>
      </div>
      <div class="collapse navbar-collapse" id=main-menu>
        <ul class="nav navbar-nav navbar-right">
          <span class=nav-s></span>
          <li class=active><a href=#top>Home</a>
          </li>
          <li><a href=#product-inner>Mission</a>
          </li>
          <li><a href=#portfolio>Sponsors</a>
          </li>
          <li><a href=#promotion>Register</a>
          </li>
          <li><a href=#contact>Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>