Я работал над сайтом, используя загруженный готовый к использованию скомпилированный код для Bootstrap v4.1.3, предоставленный на странице начальной загрузки, и после прочтения того, как работать с навигацией и кнопками, я столкнулся с проблемой.
ниже моих метатегов у меня есть ссылки css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="addons/css/bootstrap.min.css">
<link rel="stylesheet" href="addons/css/core-style.css">
<link rel="stylesheet" href="addons/css/menustyle.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-info fixed-top">
<a class="navbar-brand" href="#">
<img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top">
Bootstrap</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Facultad</a>
<a class="nav-item nav-link" href="#">Alumnos</a>
<a class="nav-item nav-link active" href="#">Consultas<span class="sr-only">(current)</span></a>
</div>
<div class="mx-auto"><b><h4>Consulta General [Notas]</h4></b></div>
</div>
</nav>
</header>
<section>...<section>
<section>...<section>
<button type="button" class="btn btn-secondary" style="width:auto" onClick="window.location.href='../Consultas.html'">Menu Consultas</button>
<section>...<section>
<footer>...</footer>
<!-- Opptional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Единственное исправление, которое у меня есть для кнопки, которая находится в теле ниже всего остального кода, но на навигационной панели тег button делает то же самое для кода тега a
Из навигационной панели единственная проблема, которая создала мне проблему, - это заполнитель, который находится между тегами a, такими же, как и в приведенном ниже коде, и когда я наводю курсор на кнопку, она становится меньше, и это меняет высоту навигационной панели. при наведении на него ссылка работает нормально, и только при наведении курсора происходит то же самое, когда я использую код для button на панели навигации, предоставленной bootstrap
<a class="btn btn-secondary" href="Menu.php" role="button">Menu Principal</a>
button в моем коде работает, но кнопка a with role = на другой странице делает то же самое, что и nav.
Не знаю, полностью ли я объяснил свою проблему или ее легко понять, код, который я использовал, находится в документации сайта Bootstrap, а также для панели навигации, если я не поставил fixed-top в классе он оставляет пустое пространство вверху страницы. Я поместил следующий код в menustyle.css, но это не устранило, есть ли другой способ удалить пустое пространство без необходимости использовать fixed-top в классе nav?
header{
margin:0px;
}
body{
margin:0;
}