html - 带有大图像的 Bootstrap 4 导航栏
问题描述
我需要将一个大图像(240px 高度)添加到 bootstrap 4 导航栏。品牌文字和导航链接应与图片底部对齐。
我尝试添加 align-bottom,使用不同的 div 等,但没有设法将链接放到底部。
最后的手段是添加一个带有图像高度的 padding-top(或 margin-top)。但我想避免这种情况,因为图像可能会根据设备改变它的大小。
有什么帮助吗?
这是演示代码:https ://jsfiddle.net/8n2oxtwt/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand" href="#"><img src="https://cdn.stocksnap.io/img-thumbs/960w/DOHH1Q2PPE.jpg" height="240px"> Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample02">
<ul class="navbar-nav mr-auto">
<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="#">Link</a>
</li>
</ul>
<form class="form-inline my-2 my-md-0">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</nav>
<main role="main">
<div class="jumbotron">
<div class="col-sm-8 mx-auto">
<h1>Navbar examples</h1>
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-top/">top</a> and <a href="../navbar-top-fixed/">fixed top</a> examples.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p>
<a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
</p>
</div>
</div>
</main>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
解决方案
align-items-end
在导航栏和align-bottom
导航栏品牌上使用类...
<nav class="navbar navbar-expand navbar-dark bg-dark align-items-end">
<a href="#"><img src="https://cdn.stocksnap.io/img-thumbs/960w/DOHH1Q2PPE.jpg" height="240px"> <span class="navbar-brand align-bottom pb-2">Test</span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample02">
<ul class="navbar-nav mr-auto">
<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="#">Link</a>
</li>
</ul>
</div>
</nav>
推荐阅读
- javascript - 将带有&符号的字符串转换为Javascript(节点js)中的键值映射
- sql - SQL Server 2014 中的 SUM
- mysql - 我的 Mysql 选择查询每次运行时运行速度较慢
- javascript - How can i resize an image in a block display? (javascript or react)
- reactjs - 如何在 React 中存储将在一小时内到期的日期?
- azure-active-directory - AAD - 用户密码到期更改通知
- android - 如何连续扫描 GSM 数据(信号塔 ID 和信号强度)
- snowflake-cloud-data-platform - 在 PlayFab 共享数据库中读取视图时出错:“对象 'REPORT_PRIMARY.PUBLIC.ACCOUNT_MAPPER' 不存在或未经授权。”
- google-apps-script - Google App Script - 在“当前”模式下自动更新幻灯片
- java - 如何在不丢失信息的情况下保存字符串字节?