Question

我想要一个右侧有可折叠元素的导航栏，用于保存我的社交媒体链接和图标。麻烦的是，引导导航栏似乎不起作用：https://jsfiddle.net/44mbr237/1/

当浏览器窗口折叠时，社交媒体图标和链接会堆叠在折叠图标的顶部（右侧）。

HTML：

    <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"><i class="fa fa-2x fa-comment"></i></span>
        <span class="icon-bar"><i class="fa fa-2x fa-facebook"></i></span>
       <span class="icon-bar"><i class="fa fa-2x fa-twitter"></i> </span>
      </button>
      <div class="navbar-brand">
          <img alt="PG Logo" src="http://newsinteractive.post-gazette.com/hbcu/img/PGLogoTwitter_2_10_12_bigger.gif">
      </div>
    </div>
    <h1 class="navbar-text">HEADER HERE</h1>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


      <ul class="nav navbar-nav navbar-right">
        <li><i class="fa fa-2x fa-comment"></i></li>
        <li><a href="https://www.facebook.com/sharer/sharer.php?u=http://newsinteractive.post-gazette.com/hbcu/" target="_blank"><i class="fa fa-2x fa-facebook"></i></a></li>
        <li><a href="https://twitter.com/hashtag/pgHBCU"><strong>#pgHBCU</strong></a> </li>
        <li><a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fnewsinteractive.post-gazette.com%2Fhbcu%2F&text=%23pgHBCU Pittsburgh high school students' perspectives on historically black colleges(via @PittsburghPG):&:tw_p=tweetbutton&url=http://newsinteractive.post-gazette.com/hbcu/" target="_blank"> <i class="fa fa-2x fa-twitter"></i> </a></li>
      </ul>
    </div>
  </div>
</nav>

CSS

    .navbar {
    height: 73px;
    margin-bottom: 0 !important;
    border: none 0 !important;
    background-color: black !important;
    color: white !important;
}
.navbar-brand {
    padding: 0 !important;
}
.navbar-brand img {
    border-right: 2px solid white;
}
.navbar-text {
    color: white !important;
    font-family: "Open Sans Condensed", sans-serif !important;
    font-weight: bold !important;
}

有人可以告诉我，我做错了吗？

Answer 1

在这里：https://jsfiddle.net/AndrewL32/44mbr237/8/

您正在将社交图标添加到按钮，而不是将其添加到可折叠div中，您还需要为导航栏指定高度，以便它可以容纳您的导航栏品牌图像徽标，如下所示：

.navbar {
    height: 55px;
    margin-bottom: 0 !important;
    border: none 0 !important;
    background-color: black !important;
    color: white !important;
}

还要将navbar-brand添加为锚点而不是div

Answer 2

JSFiddle- Navbar

这就是你需要的。

首先，您需要包含jQuery。然后，h1标题不应放在那里，而是放在品牌中。这是代码：

    <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#"><img class="img-responsive" alt="PG Logo" src="http://newsinteractive.post-gazette.com/hbcu/img/PGLogoTwitter_2_10_12_bigger.gif"/></a>
        <h4 class="navbar-text">HEADER HERE</h4>
    </div>


    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span class="fa fa-2x fa-comment"></span></li>
        <li><a href="https://www.facebook.com/sharer/sharer.php?u=http://newsinteractive.post-gazette.com/hbcu/" target="_blank"><i class="fa fa-2x fa-facebook"></i></a></li>
        <li><a href="https://twitter.com/hashtag/pgHBCU"><strong>#pgHBCU</strong></a></li>
              </li>
            <li><a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fnewsinteractive.post-gazette.com%2Fhbcu%2F&text=%23pgHBCU Pittsburgh high school students' perspectives on historically black colleges(via @PittsburghPG):&:tw_p=tweetbutton&url=http://newsinteractive.post-gazette.com/hbcu/" target="_blank"> <i class="fa fa-2x fa-twitter"></i> </a></li>
      </ul>
    </div>
  </div>
</nav>


.navbar-brand {
    padding: 0 !important;
}
.navbar-brand img {
    border-right: 2px solid white;
    height:51px;
}
.navbar-text {
    color: white !important;
    font-family:"Open Sans Condensed", sans-serif !important;
    font-weight: bold !important;
    margin-left:15px;
}

编辑：

试试这个：Second JSFiddle

bootstrap navbar将社交图标折叠在一起

2 个答案: