Html 导航栏上的按钮使导航栏高度增加_Html_Css_Bootstrap 4

Html 导航栏上的按钮使导航栏高度增加

html css bootstrap-4

Html 导航栏上的按钮使导航栏高度增加,html,css,bootstrap-4,Html,Css,Bootstrap 4,我使用引导在navbar上参考以下示例：复制HTML，我把它放在我的JSP页面中。以下是最终的HTML： <html> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link hr

我使用引导在navbar上参考以下示例：

复制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>


2.
搜寻


导航栏窗体
使用.form inline类在导航栏内并排对齐表单元素

在IE和Google Chrome上，导航栏的高度都大于示例中的高度，控件下方有额外的空间，如下所示。我发现这是由于按钮。如果移除按钮，导航栏的高度将与示例中相同。根本原因是什么？我如何解决？我使用的是Bootstrap4.4

这是因为浏览器默认的CSS，也称为用户代理样式表

我发现如果你使用

这个空格会被删除，因为HTML5的用户代理样式表中表单元素的底边是

0px

如果不使用<代码> <代码>，请考虑HTML4的用户代理样式表，其中表单元素的底部边距为<代码> 1EM

因此，现在您可以选择是否必须使用

否则，另一种解决方案是在form元素中使用

class=“mb-0”

设置

margin-bottom:0px是bootstrap-4类用于任何元素。
我无法复制此代码。您可以提供链接或代码片段（例如，使用JSFIDLE）？必须有特定的CSS规则导致这个问题。你能试试这个，让我知道这是否有效吗？在chrome中，我觉得很好：你在使用CSS吗？请先重新设置：CTRL+SHIFT+Del这很奇怪。我发现，如果我加上，问题就会消失！我试了几次。如果删除，IE和Chrome都会出现问题。如果我添加了它，两个浏览器中的问题都消失了。但我认为只是说呈现的页面是HTML。你的意思是说的存在意味着它是HTML5？是的，正是在HTML5中呈现的页面。欢迎随时光临。