gpt4 book ai didi

html - 将响应式 Logo 放入 Bootstrap Navbar 的最简单方法是什么

转载 作者:太空宇宙 更新时间:2023-11-04 11:25:54 24 4
gpt4 key购买 nike

所以,我是一个菜鸟,通过使用这个模板来工作:http://startbootstrap.com/template-overviews/freelancer/

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

将响应式 Logo 图形放入 Bootstrap 导航栏的最简单方法是什么?

这是我目前拥有的代码。

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

请指教。

最佳答案

添加

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

</button>之后

通过这种方式,boostrap 会自动将您的 Logo 放在左上角。

然后剪裁你的 My_logo_navbar.png到你想要的大小,并使用媒体查询来改变它在较小设备上的宽度或高度。如果需要,可以使用 navbar-brand 中的两个。具有单独 ID 的类。一种用于大屏幕,另一种用于小屏幕。我总是将它用于我的元素。

关于html - 将响应式 Logo 放入 Bootstrap Navbar 的最简单方法是什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32389264/

24 4 0
文章推荐: html - 如何定位两个
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com