我的导航栏 img 不支持 bootstrap 中留下的浮动
我编写了一个导航栏并使用引导程序来使用此代码
<!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>
我想将我的徽标设置在浏览器左侧，但这不会有什么问题
慕婉清6462132浏览 118回答 4
4回答
-
料青山看我应如是
引导程序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
这是一个不好的做法，因为在导航栏下.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
我们认为您的徽标是i 标签；添加这个类 <i class="mr-auto"></i> 如果你的标志不是i 标签，你也可以使用这段代码；像img、div等标签。 -
守着星空守着你
你可以使用列表来做到这一点，它非常像<!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>
随时随地看视频慕课网APP
相关分类
Html5