Question

所以，我是一个菜鸟，正在使用这个模板：http://startbootstrap.com/template-overviews/freelancer/

我正在编辑它，试图让一些花里胡哨的东西更好地工作。我想把我的标识放在标题中并让它有响应，我无法得到我在这里找到的其他答案......我可能有点厚，事实上这可能是个大问题。

将响应式徽标图形放入引导导航栏的最简单方法是什么？

这是我目前的代码。

</head>

<body id="page-top" class="index">

<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <a href="#" class="pull-left"><img src="images/My_logo_navbar.png" class="img-responsive"></a>
      <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" 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>
</div>

请告知。

Answer 1

添加

<div class="navbar-brand navbar-brand-left"><a href="index.html"><img src="images/My_logo_navbar.png"></a></div>

在</button>

之后

这样，boostrap会自动将您的徽标放在左上角。

将My_logo_navbar.png裁剪为您想要的尺寸，并使用媒体查询在较小的设备上更改宽度或高度。如果你想要，你可以使用两个navbar-brand类和不同的id。一个用于较大的屏幕，一个用于较小的屏幕。我总是将它用于我的项目。

将响应式徽标放入Bootstrap Navbar的最简单方法是什么？

1 个答案: