Question

我一直在使用引导页面上提供的Bootstrap v4.1.3的下载即用型编译代码下载网站，在阅读了如何在导航和按钮上工作后，我偶然发现了一个问题。

在我的meta标签下面，我具有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标签之间，即当我将鼠标悬停在按钮上时，占位符会变小并且会改变当我将鼠标悬停在导航栏上时，链接就可以正常工作，并且一切都只是悬停，当我使用引导程序提供的Navbar上的button代码时也会发生同样的情况

<a class="btn btn-secondary" href="Menu.php" role="button">Menu Principal</a>

我的代码上的button可以工作，但是另一页上带有role = button的a与导航相同。

不知道我是否已经完全解释了我的问题或易于理解，我所使用的代码也在Bootstrap网站的文档中，如果我不将fixed-top放在导航栏中，该类在页面顶部留有空白，我在menustyle.css上放置了以下代码，但它没有解决，是否有另一种方法可以删除空白而无需在其中使用fixed-top导航课？

header{
    margin:0px;
}
body{
    margin:0;
}

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">nav-bar</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active" title="home"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
  
</body>
</html>

嘿，这是nav bar的工作片段。请向我们展示您面临的问题

使用Bootstrap在站点上调整大小的按钮

1 个答案: