我编写了一个导航栏并使用引导程序来使用此代码<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=divice-width ,intial-scale=1"><title>complete bootstrap 4 website layout</title><link rel="stylesheet" href="css/bootstrap.css"><script src="js/jquery.min.js"></script><script src="js/popper.min.js"></script><script src="js/popper.min.js"></script><link rel="stylesheet" href="style.css"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous"></head><body><!--navigation--><nav class="navbar navbar-expand-md navbar-light bg-light sticky-top"><div class="container-fluid"> <a href="" class="navbar-brand float-left"><img src="img/mehrlogo.png" alt=""></a></div></nav></body></html>我想将我的徽标设置在浏览器左侧，但这不会有什么问题
4 回答
料青山看我应如是
TA贡献1772条经验 获得超7个赞
引导程序4
请注意，Bootstrap4 文档将div标签与float类一起使用。 https://getbootstrap.com/docs/4.0/utilities/float/
它不适用于a标签。
Bootstrap 小于 4
<a href="" class="navbar-brand float-left">
我注意到您float-left在锚标记中添加了一个类。据我所知，Bootstrap 中没有类float-left.
您可以简单地定义自己的类。
<style>
.float-left {
float:left;
}
</style>
希望您觉得它有帮助:)
UYOU
TA贡献1878条经验 获得超4个赞
这是一个不好的做法，因为在导航栏下.container-fluid不使用，因为这是一个容器，我们必须在其中放置一些其他类row col等
<!--navigation-->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a href="" class="navbar-brand float-left"><img src="img/mehrlogo.png" alt=""></a>
</div>
</nav>
好的做法是简单地使用 bootstrap 导航栏，它可以从互联网上的许多资源中获得，下面给出的简单导航栏示例，在bootstrap.min.css文件中，有许多 css 类只需调用类名即可在您的项目中使用。
如果您使用此代码，则无需设置向左浮动和向右浮动，只需使用带有 img 标签的导航栏品牌下的徽标
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
慕运维8079593
TA贡献1876条经验 获得超5个赞
我们认为您的徽标是i 标签；添加这个类 <i class="mr-auto"></i> 如果你的标志不是i 标签，你也可以使用这段代码；像img、div等标签。
守着星空守着你
TA贡献1799条经验 获得超8个赞
你可以使用列表来做到这一点，它非常像
<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<ul class="mr-auto mb-0 pl-0">
<a href="" class="navbar-brand"><img src="https://res.cloudinary.com/nalabdou/image/upload/v1585057140/user.png" style="width:35px;height:35px"/></a>
</ul>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
- 4 回答
- 0 关注
- 87 浏览
添加回答
举报
0/150
提交
取消