как выровнять иконки меню начальной загрузки (в сложенном состоянии)

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

Я не найти какой-либо проблема проверяет фрагмент, если вы хотите показать URL-адрес, я могу проверить его.

<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>

Answer 2

Это то, что вы ищете

.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>