ブートストラップを使用してヘッダにロゴを配置する

-1

ロゴの位置を、左上のナビゲーションバー内に配置しようとしています。ブートストラップを使用してヘッダにロゴを配置する

「margin-right」を使用してnavbarの左端に配置しようとすると、私のロゴが反応しません。
1. ロゴを左に配置すると、メニューがナビゲーションバーの中央に向かって右に移動します。

誰にでもアドバイスできますか？

ありがとうございます。

<!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"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <title>Arabella Hill</title> 
 

 
    <!-- Bootstrap --> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 

 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
    </head> 
 
    <body> 
 
    <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container-fluid"> 
 
    <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> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href='#'><img src="img/arabella.png" class="img-responsive" img style="max-width:300px; margin-top:-80px; margin-right: 100px;"></a> 
 
    </div> 
 
    <div class="navbar-collapse collapse" id="navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href='#'>Home</a></li> 
 
     <li><a href='#'>About</a></li> 
 
     <li class="dropdown"> 
 
      <a href='#' class="dropdown-toggle" data-toggle="dropdown">Themes<b class="caret"></b></a> 
 
     <ul class="dropdown-menu"> 
 
      <li class="dropdown-header">Admin & Dashboard</li> 
 
      <li><a href="#">Admin 1</a></li> 
 
      <li><a href="#">Admin 2</a></li> 
 
     </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    </body> 
 
</html>

出典

2017-04-14 Benjamints

あなたのCSSを投稿してください。 – user886

私は何も持っていない、それはブートストラップです。 – Benjamints

もし私が持っていれば、私はHTMLファイルにスタイルを設定しました。 – Benjamints

あなたが負の値で「マージン左」を使用してみましたか？

... margin-top：-80px; margin-left：-20px; ...

イメージのサイズに合わせて値を変更する必要がある場合があります。

出典

2017-04-14 16:59:11

.navbarまたは.navbar-ヘッダークラスに他のスタイリングがある場合があります。

追加のスタイリングについては、ブラウザ検査ツールでこれらのDIVを確認してください。

出典

2017-04-14 17:01:01

あなたのロゴに余白を取り除いてください。それはあなたのナビを右に押しています。

あなたは私も使用して助言する画面

<a class="navbar-brand" href='#'><img src="img/arabella.png" class="img-responsive" style="max-height:50px; margin-top:-80px; margin-left: -30px;"></a>

の左側に対してそれをしたい場合、私はCSSファイルで、あなたのスタイルを入れていますが、インラインで行うこのような何かをしようとするつもりなら助言する

パッディングとマージンがロゴにどのように影響しているかをブラウザのデベロッパーインスペクタが確認します。

出典

2017-04-14 17:10:39

ブートストラップを使用してヘッダにロゴを配置する

答えて

関連する問題