Question

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

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上，导航栏的高度都比示例中的导航栏高，并且控件下方有多余的空格，如下所示。我发现这是由于按钮。如果删除按钮，则导航栏的高度将与示例中的高度相同。可能是根本原因，如何解决？我正在使用Bootstrap 4.4。

Answer 1

这是因为浏览器的默认CSS（也称为“用户代理样式表”）。

我发现如果您使用<!DOCTYPE html>，则会删除此空间，因为HTML5的用户代理样式表中表单元素的底边距是0px;

如果我不使用<!DOCTYPE html>，则考虑使用HTML4的用户代理样式表，并且其中表单元素的底边距为1em。

因此，现在您可以选择是否必须使用<!DOCTYPE html>。

否则，另一种解决方案是在表单元素中使用class="mb-0"，它是bootstrap-4类，可为任何元素设置margin-bottom: 0px;。

导航栏上的按钮导致导航栏高度增加

1 个答案: