我參考了使用 Bootstrap 的導(dǎo)航欄上的以下示例：https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_form&stacked=h復(fù)制 HTML，將其放入 JSP 頁(yè)面中。以下是最終的 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 上，導(dǎo)航欄的高度都比示例中的高度大，控件下方有額外的空格，如下所示。我發(fā)現(xiàn)這是由于按鈕造成的。如果刪除該按鈕，導(dǎo)航欄的高度將與示例中的相同。根本原因可能是什么？我該如何解決它？我正在使用 Bootstrap 4.4。
1 回答
楊魅力
TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超6個(gè)贊
這是因?yàn)闉g覽器默認(rèn)的 CSS 也稱(chēng)為用戶代理樣式表。
我發(fā)現(xiàn)如果你使用<!DOCTYPE html>這個(gè)空格就會(huì)被刪除，因?yàn)?HTML5 的用戶代理樣式表中表單元素的下邊距是0px;
如果我不使用<!DOCTYPE html>它，請(qǐng)考慮 HTML4 的用戶代理樣式表，并且其中表單元素的下邊距是1em.
所以現(xiàn)在你可以選擇是否必須使用<!DOCTYPE html>。
否則，另一個(gè)解決方案是class="mb-0"在表單元素中使用 bootstrap-4 類(lèi)來(lái)margin-bottom: 0px;為任何元素設(shè)置。
- 1 回答
- 0 關(guān)注
- 148 瀏覽
添加回答
舉報(bào)
0/150
提交
取消