如何对齐图标引导菜单（处于折叠状态）

Question

我有以下代码

        <div class="navbar navbar-inverse" role="banner">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html">
                    <h1><img src="images/logo.png" alt="logo"></h1>
                </a>

            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href=""><i class="fa fa-2x fa-facebook"></i></a></li>
                    <li><a href=""><i class="fa fa-2x fa-twitter"></i></a></li>
                    <li><a href=""><i class="fa fa-2x fa-youtube-play"></i></a></li>
                </ul>
            </div>
        </div>
    </div>

当我在正常模式下运行时 - 它会这样做..

但是当我进入移动模式时 - 图标会奇怪地对齐。

它变得如此

如何制作图标，使图标在移动模式下向左或向右对齐（当它折叠时）

Answer 1

这就是你要找的东西

.navbar-brand img{
  max-height: 100%;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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="#">
      
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1000px-Google_2015_logo.svg.png" alt="logo">
                </a>
      
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#"><i class="fa fa-2x fa-facebook"></i></a></li>
        <li><a href="#"><i class="fa fa-2x fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-2x fa-youtube-play"></i></a></li>
      </ul>
      
    </div>
  </div>

Answer 2

我没有发现任何问题检查代码段，如果你想显示我可以查看它的网址。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="navbar navbar-inverse" role="banner">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html">
                    <h1 style="padding:0px;margin:0px;line-height:20px;;"><img src="http://scholar.google.it/intl/it/scholar/images/1x/googlelogo_color_270x104dp.png" style="height:40px;" alt="logo"></h1>
                </a>

            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href=""><i class="fa fa-2x fa-facebook"></i></a></li>
                    <li><a href=""><i class="fa fa-2x fa-twitter"></i></a></li>
                    <li><a href=""><i class="fa fa-2x fa-youtube-play"></i></a></li>
                </ul>
            </div>
        </div>
    </div>