Question

我正在构建一个Bootstap导航栏，左侧有2个社交媒体图标，右侧有一个电话号码。我的社交图标最终垂直堆叠，而不是水平放置。这是我的代码：

 <nav class="navbar navbar-static-top navbar-inverse">
        <a class="navbar-brand" href="#">Project name</a>
        <ul class="nav navbar social">
            <li class="nav-item active">
            <a class="nav-link" href="https://www.facebook.com/account?ref=hl" target="_blank" onclick="ga('send', 'event', 'link', 'click', 'Facebook Social Clicks');">
                <span class="fa-stack fa-lg">
                  <i class="fa fa-circle fa-stack-2x"></i>
                  <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                </span>
            </a>
            </li>

            <li class="nav-item active">
            <a class=""nav-link" href="https://twitter.com/account" target="_blank" onclick="ga('send', 'event', 'link', 'click', 'Twitter Social Clicks');">
                <span class="fa-stack fa-lg">
                  <i class="fa fa-circle fa-stack-2x"></i>
                  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                </span>
            </a>
            </li>
        </ul>
    </nav>

我做错了什么？

Answer 1

 .fa-stack-1x, .fa-stack-2x {
      line-height: inherit !important;
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" >

  </head>
  <body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
       <li class="nav-item ">
            <a class="nav-link" href="https://twitter.com/account" target="_blank" onclick="ga('send', 'event', 'link', 'click', 'Twitter Social Clicks');">
               <i class="fa fa-circle fa-stack-2x"></i>
                  <i class="fa fa-twitter  fa-stack-1x fa-inverse"></i>
            </a>
            </li>
            <li class="nav-item ">
            <a class="nav-link" href="https://www.facebook.com/account?ref=hl" target="_blank" onclick="ga('send', 'event', 'link', 'click', 'Facebook Social Clicks');">
                  <i class="fa fa-circle fa-stack-2x"></i>
                  <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
            </a>
            </li>
    </ul>
  </div>
</nav>
  


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-
0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

  </body>

</html>

在Bootstrap导航栏中堆积的字体真棒社交图标

1 个答案: