2016-08-25 5 views
-1

他の質問とは異なる質問です。これはサイドバーがロゴに囲まれているためです。 私のページにロゴを使用したい。しかし、私はそれを使用します。それは画面に収まらないでしょう。サイドバーは、デスクトップ上のロゴをカバーします。スクリーンショットも添付されますthis is the result on desktop。 ロゴが半分だけ表示されます。 私のモバイルでこのページを開いたとき。それはよさそうだ。Navbarロゴ付きブートストラップ

<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
      </button> 
      <a href="index.php" class="navbar-left"><img src="logo.jpg" alt=""></a> 
     </div> 
     <!-- /.navbar-header --> 

     <ul class="nav navbar-top-links navbar-right"> 

      <!-- /.dropdown --> 

      <li class="dropdown"> 
       <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
        <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i> 
       </a> 
       <ul class="dropdown-menu dropdown-user"> 
        <li><a href="add_user.php"><i class="fa fa-user fa-fw"></i> Add User</a> 
        </li> 

       </ul> 
       <!-- /.dropdown-user --> 
      </li> 
      <!-- /.dropdown --> 
     </ul> 
     <!-- /.navbar-top-links --> 

     <div class="navbar-default sidebar" role="navigation"> 
      <div class="sidebar-nav navbar-collapse"> 
       <ul class="nav" id="side-menu"> 

        <li> 
         <a href="index.php"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a> 
        </li> 

       </ul> 
      </div> 
      <!-- /.sidebar-collapse --> 
     </div> 
     <!-- /.navbar-static-side --> 
    </nav> 

この画像をどのように調整するか教えてください。おかげ

+0

imgタグのheight属性とwidth属性を指定してから、試してみてください。 – Rahi

+0

が機能しません。 #Rahi –

答えて

1

は、マークアップ

<img class="img-responsive logo" src="logo.jpg" alt=""> 

とCSSの

.logo {max-width:150px; /* Adjust accordingly */ } 

とサイドバーにパディング/マージンを追加するに

を試してみてください。

+0

本当に有用です。ありがとう –

関連する問題