Question

我正试图将我的徽标放在导航栏内左上方。

当我尝试使用＆＃39; margin-right＆＃39;将我的徽标放置在导航栏的最左侧时，我的徽标不会响应。
1. 当我将徽标放在左侧时，它会将菜单向右推到导航栏的中间位置。

有人能给我建议吗？

谢谢。

＆＃13;

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

＆＃13;

Answer 1

您是否尝试过使用＆＃34; margin-left＆＃34;负值？

... margin-top：-80px;保证金左：-20px; ...

您可能需要更改值以适合图像尺寸。

Answer 2

.navbar或.navbar-标题类可能还有其他一些样式正在推动它。

查看浏览器检查工具，检查这些DIV以获得额外的样式。

Answer 3

摆脱徽标上的边距。那就是你的导航向右推。

我建议你把你的风格放在一个CSS文件中，但如果你想要内联尝试这样的东西，如果你想要它在屏幕的左侧

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

我还建议您使用浏览器上的开发人员检查器查看填充和边距是如何影响徽标的。

使用bootstrap在标题中定位徽标

3 个答案: