使用 Bootstrap 现场调整按钮大小答案

【问题标题】：buttons resizing on site with Bootstrap使用 Bootstrap 现场调整按钮大小
【发布时间】：2019-04-10 14:33:21
【问题描述】：

我一直在使用引导页面上提供的为 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 标记的代码执行相同的操作

在导航栏中，唯一给我带来问题的是占位符，它位于 atags 之间，与下面的代码相同，当我将鼠标悬停在按钮上时，它会变小并改变导航栏的高度当我悬停它时，链接工作正常，只是悬停，当我在引导程序提供的导航栏上使用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;
}

【问题讨论】：

如果您上面的示例实际上是您页面的结构，那将是一个问题 - 您的示例包含 html 标记之外的内容，这意味着您的页面无效。我假设这只是一个复制/粘贴错误 - 你可以编辑它以更接近你的实际标记吗？
你可以为你的问题创建一个工作演示
不 header 在正文中我没有把所有内容都放在正文中，因为我在页眉之后有部分到页面工作的其他内容我只是这样放置以显示问题出在哪里我有 js 和指向 css 的链接

标签： html css bootstrap-4

【解决方案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 的工作 sn-p 。请告诉我们您面临的问题

【讨论】：

请尝试将您遇到的实际问题添加到上述代码 sn-p 中。