我參考了使用 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。
1 回答
楊魅力
TA貢獻1811條經驗 獲得超6個贊
這是因為瀏覽器默認的 CSS 也稱為用戶代理樣式表。
我發現如果你使用<!DOCTYPE html>這個空格就會被刪除，因為 HTML5 的用戶代理樣式表中表單元素的下邊距是0px;
如果我不使用<!DOCTYPE html>它，請考慮 HTML4 的用戶代理樣式表，并且其中表單元素的下邊距是1em.
所以現在你可以選擇是否必須使用<!DOCTYPE html>。
否則，另一個解決方案是class="mb-0"在表單元素中使用 bootstrap-4 類來margin-bottom: 0px;為任何元素設置。
- 1 回答
- 0 關注
- 126 瀏覽
添加回答
舉報
0/150
提交
取消