html - 导航栏上的按钮导致导航栏高度增加
问题描述
我使用 Bootstrap 在导航栏上参考以下示例:
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_form&stacked=h
复制 HTML,我把它放在我的 JSP 页面中。以下是最终的 HTML:
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.bundle.min.js"></script>
<title>2</title>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
<br>
<div class="container">
<h3>Navbar Forms</h3>
<p>Use the .form-inline class to align form elements side by side inside the navbar.</p>
</div>
</body>
</html>
在 IE 和 Google Chrome 上,导航栏的高度都大于示例中的高度,控件下方有额外的空格,如下所示。我发现这是由于按钮。如果按钮被移除,导航栏的高度将与示例中的相同。什么可能是根本原因,我该如何解决?我正在使用引导程序 4.4。
解决方案
推荐阅读
- amazon-web-services - S3 put 命令方法的安全性如何?
- flutter - Flutter CircularProgressIndicator 描边类型
- javascript - 范围格式数字输入的自定义输入字段问题 [低-高]
- c# - 线条形状看起来很奇怪
- google-developers-console - 谷歌开发者账号激活
- heroku - 使用 heroku-buildpack-rust 构建 Rocket 应用程序时出现链接错误
- c - 当我将 r=NULL 放入函数 ins() 时,程序没有任何影响
- android - Flutter NFC:如何防止/停止 Flutter Android Build 中的“新标签扫描”默认活动?
- xamarin.android - Xamarin Android 中视频播放器中的前进和后退选项问题
- bootstrap-4 - 如何使用移动设备的引导程序使我的导航栏可折叠?