bootstrap 导航栏将社交图标叠放在一起

Question

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

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

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

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

Answer 2

给你：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;
}

同时添加您的导航栏品牌作为锚而不是 div

bootstrap 导航栏将社交图标叠放在一起

bootstrap navbar collapsing social icons on top of one another

css

navbar

twitter-bootstrap