Вопрос:
Я использую Bootstrap 4, это источник HTML
<html xmlns=»http://www.w3.org/1999/xhtml»> <!—<th:block th:include=»fragments/header :: header»></th:block>—> <!—For suggest css class purpose—> <!—<link rel=»stylesheet» href=»../../static/bootstrap.min.css»>—> <!DOCTYPE html> <html> <head> <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css» integrity=»sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm» crossorigin=»anonymous»> <!—<link rel=»stylesheet» href=»../../static/bootstrap.min.css»>—> <!—view-source:https://getbootstrap.com/docs/4.0/examples/starter-template/—> </head> <body> <nav class=»navbar navbar-expand-md navbar-dark bg-dark fixed-top»> <a class=»navbar-brand» href=»#»>Navbar</a> <button class=»navbar-toggler» type=»button» data-toggle=»collapse» data-target=»#navbarsExampleDefault» aria-controls=»navbarsExampleDefault» aria-expanded=»false» aria-label=»Toggle navigation»> <span class=»navbar-toggler-icon»></span> </button> <div class=»collapse navbar-collapse» id=»navbarsExampleDefault»> <ul class=»navbar-nav mr-auto»> <li class=»nav-item active»> <a class=»nav-link» href=»#»>Home <span class=»sr-only»>(current)</span></a> </li> <li class=»nav-item»> <a class=»nav-link» href=»#»>Link</a> </li> <li class=»nav-item»> <a class=»nav-link disabled» href=»#»>Disabled</a> </li> <li class=»nav-item dropdown»> <a class=»nav-link dropdown-toggle» href=»http://example.com» id=»dropdown01″ data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»>Dropdown</a> <div class=»dropdown-menu» aria-labelledby=»dropdown01″> <a class=»dropdown-item» href=»#»>Action</a> <a class=»dropdown-item» href=»#»>Another action</a> <a class=»dropdown-item» href=»#»>Something else here</a> </div> </li> </ul> <form class=»form-inline my-2 my-lg-0″> <input class=»form-control mr-sm-2″ type=»text» placeholder=»Search» aria-label=»Search»> <button class=»btn btn-outline-success my-2 my-sm-0″ type=»submit»>Search</button> </form> </div> </nav> <main role=»main» class=»container»> <div class=»row»> <div class=»col-lg-12 col-md-12″> <h3>Ngân hàng</h3> <ul> <li> <a href=»finance_report.jsp»>Báo cáo tài chính</a> </li> <li> <a href=»balance_sheet_management.jsp»>Bảng cân đối tài khoản (Mẫu quản trị)</a> </li> <li> <a href=»account_balance.jsp»>Bảng cân đối tài khoản</a> </li> <li> <a href=»balance_sheet.jsp»>B01-DN: Bảng cân đối kế toán</a> </li> <li> <a href=»income_statement.jsp»>B02-DN: Báo cáo Kết quả hoạt động kinh doanh</a> </li> <li> <a href=»obligation_with_state.jsp»>Tình hình thực hiện nghĩa vụ với nhà nước</a> </li> <li> <a href=»cash_flow_statement.jsp»>B03-DN: Báo cáo lưu chuyển tiền tệ (PP trực tiếp)</a> </li> <li> <a href=»finance_statement_notes.jsp»>B09-DN: Thuyết minh báo cáo tài chính</a> </li> </ul> </div> </div> </main><!— /.container —> <div> © 2018 Do Nhu Vy <!— Optional JavaScript —> <!— jQuery first, then Popper.js, then Bootstrap JS —> <script src=»https://code.jquery.com/jquery-3.2.1.slim.min.js» integrity=»sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN» crossorigin=»anonymous»></script> <script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js» integrity=»sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q» crossorigin=»anonymous»></script> <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js» integrity=»sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl» crossorigin=»anonymous»></script> </div> </body> </html>
Как вы видите, меню перекрывает верхнюю область, как ее исправить?
Лучший ответ:
Добавьте классы mt-5 и pt-5 к основному .container.
Это промежуточные классы для добавления “margin-top” (mt-*) и “padding-top” (pt-*).
Причина, по которой вам нужны эти интервальные классы, в этом случае – это то, что вы используете класс fixed-top для navbar. Без этого класса вам не нужны классы интервалов.
Ссылка:
