gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 10:14:18 29 4
gpt4 key购买 nike

我使用 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 上,导航栏的高度都比示例中的高,控件下方有额外的空间,如下所示。我发现这是由于按钮造成的。如果按钮被移除,导航栏的高度将与示例中的相同。根本原因可能是什么,我该如何解决?我正在使用 Bootstrap 4.4。

What I got

最佳答案

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

enter image description here
我发现如果你使用 <!DOCTYPE html>因为 HTML5 的用户代理样式表中表单元素的底部边距是 0px,所以删除了这个空间。 ;

如果我不使用 <!DOCTYPE html>它考虑了 HTML4 的用户代理样式表,其中表单元素的下边距为 1em .

所以现在选择是你的,如果你必须使用 <!DOCTYPE html>或不。

否则另一个解决方案是使用 class="mb-0"在表单元素中,要设置的是 bootstrap-4 类 margin-bottom: 0px;对于任何元素。

关于html - 导航栏上的按钮导致导航栏高度增加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61154386/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com