时间戳

首页 > 解决方案 > Bootstrap 导致导航栏 CSS 崩溃

html - Bootstrap 导致导航栏 CSS 崩溃

问题描述

我正在尝试学习一些 HTML、CSS 和 JS，但我在使用 Bootstrap 时遇到了一个奇怪的错误，这似乎导致我的导航栏链接出现问题。

我自己使用的 CSS 是这样的：https ://pastebin.com/naVZuzaG

这是具有引导表单组件（作为测试）的联系页面的代码：https ://pastebin.com/dGGPxhNT

在第 34 行，有一个用于输入您的电子邮件的字段，看起来像这样，并且该行似乎弄乱了导航链接（当页面加载时，它们从右上角“飞来”）：

      <input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" required/>

奇怪的是，这只发生在页面在线时，在我的机器上本地这个错误不存在。谁能建议为什么会发生这种情况，所以我知道如何防止它？

/* Styling for the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: black;
}
.topnav img {
    position: relative;
    float: left;
    padding-top: 7px;
    padding-left: 20%;
}
.topnav ul {
    list-style: none;
    padding: 0px 20%;
}

/* Styling for links in navbar below */
.activelink {
    background-color: white;
    color: black !important;
}
.navlist a, select {
    font-family: 'Alata', sans-serif;
    color: white;
    float: right;
    padding: 16px 20px;
    text-align: center;
    text-transform: uppercase;
    transition-timing-function: linear;
    transition-duration: 600ms; 
}
.navlist a:hover {
    background-color: white; 
    color: black;
} 

/* Main body style and main content styles below*/
body {
    height: 100%;
    width: 100%;
    margin: 0;
    background-color: white;
}
.page-container {
    position: relative;
    min-height: 100vh;
}
.maincontent {
    padding: 30px;
}
article {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
}

article small {
    text-align: center;
    padding-top: 10px;
}

/* Header styles */
h1  {
    font-family: 'Alata', sans-serif;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 20px;
}

h2, h3, h4, h5, h6 {
    font-family: 'Alata', sans-serif;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 20px;
}

/*Footer styles below*/
footer {
    position: absolute;
    height: 3rem;
    bottom: 0;
    width: 100%;
    background-color: black;
}
footer p {
    font-family: 'Alata', sans-serif;
    color: white;
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/*Extra styling used on the contact form below*/
label {
    font-family: 'Alata', sans-serif;
}
.form-control {
    max-height: 300px;
}
.btn-primary {
    background-color: black;
}
.btn-primary:hover {
    background-color: white; 
    color: black;
    border-color: rgb(83, 80, 80);
}

/*Extra styling for gallery images*/
#imgg {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
<!DOCTYPE html>
<html>
    <!-- This is the header of the webpage -->
    <head>
        <meta charset="utf-8">
    <!-- Links to stylesheets and title -->
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Alata&display=swap"> 
        <link rel="stylesheet" type="text/css" href="styles/main.css">
        <title>Testsite</title>
    </head>
    <!-- This is the body of the webpage -->
    <body>
        <div class ="page-container">
            <header class="header">
                <!-- This is the top navigation on the webpage-->
                <nav class="topnav">
                    <a href="index.html"><img src="images/smallogo.png" alt="Logo that says Desert Water Corp" class="logo"></a>
                    <ul class="navlist">
                        <li><a class ="activelink" href="contact.html">Contact</a></li>
                        <li><a href="gallery.html">Gallery</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="index.html">Home</a></li>
                    </ul>
                </nav>
                <!-- End of navigation, start of main content section -->
                <!-- Contact form from Bootstrap -->
                <div class="maincontent">
                    <h1>Get in touch</h1>
                    <article>
                    <form action="mailto:fakeemail@fakeemail.com" method="post" enctype="text/plain" class="form-container">
                        <div class="form-group">
                            <label for="email-address">Email address</label>
                            <input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" required/>
                            <small id="emailHelp" class="form-text text-muted"><em>We will never share your email with anyone else.</em></small>
                        </div>
                        <div class="form-group">
                            <label for="message">Message</label>
                            <textarea class="form-control" id="subject" rows="13" placeholder="Write your message here..."></textarea>
                        </div>
                    </form>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </article>
                </div>
                <!-- End of main content section, start of footer -->
                <footer id="footer">
                    <p>Copyright © 2020 Desert Water Corp</p>
                </footer>
            </header>
        </div>
    </body>
</html>

标签： htmlcssbootstrap-4

解决方案

您能否提供一些问题的屏幕截图和所需的结果。因为我运行了您的代码，所以我没有发现任何问题。这就是我用引导程序看到的

结果

/* Styling for the top navigation bar */

.topnav {
  overflow: hidden;
  background-color: black;
}

.topnav img {
  position: relative;
  float: left;
  padding-top: 7px;
  padding-left: 20%;
}

.topnav ul {
  list-style: none;
  padding: 0px 20%;
}


/* Styling for links in navbar below */

.activelink {
  background-color: white;
  color: black !important;
}

.navlist a,
select {
  font-family: 'Alata', sans-serif;
  color: white;
  float: right;
  padding: 16px 20px;
  text-align: center;
  text-transform: uppercase;
  transition-timing-function: linear;
  transition-duration: 600ms;
}

.navlist a:hover {
  background-color: white;
  color: black;
}


/* Main body style and main content styles below*/

body {
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: white;
}

.page-container {
  position: relative;
  min-height: 100vh;
}

.maincontent {
  padding: 30px;
}

article {
  width: 40%;
  margin-left: auto;
  margin-right: auto;
}

article small {
  text-align: center;
  padding-top: 10px;
}


/* Header styles */

h1 {
  font-family: 'Alata', sans-serif;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 20px;
}

h2,
h3,
h4,
h5,
h6 {
  font-family: 'Alata', sans-serif;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 20px;
}


/*Footer styles below*/

footer {
  position: absolute;
  height: 3rem;
  bottom: 0;
  width: 100%;
  background-color: black;
}

footer p {
  font-family: 'Alata', sans-serif;
  color: white;
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}


/*Extra styling used on the contact form below*/

label {
  font-family: 'Alata', sans-serif;
}

.form-control {
  max-height: 300px;
}

.btn-primary {
  background-color: black;
}

.btn-primary:hover {
  background-color: white;
  color: black;
  border-color: rgb(83, 80, 80);
}


/*Extra styling for gallery images*/

#imgg {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


<div class="page-container">
  <header class="header">
    <!-- This is the top navigation on the webpage-->
    <nav class="topnav">
      <a href="index.html"><img src="https://picsum.photos/40" alt="Logo that says Desert Water Corp" class="navbar-brand logo"></a>
      <ul class="navlist">
        <li><a class="activelink" href="contact.html">Contact</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="index.html">Home</a></li>
      </ul>
    </nav>
    <!-- End of navigation, start of main content section -->
    <!-- Contact form from Bootstrap -->
    <div class="maincontent">
      <h1>Get in touch</h1>
      <article>
        <form action="mailto:fakeemail@fakeemail.com" method="post" enctype="text/plain" class="form-container">
          <div class="form-group">
            <label for="email-address">Email address</label>
            <input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" required/>
            <small id="emailHelp" class="form-text text-muted"><em>We will never share your email with anyone else.</em></small>
          </div>
          <div class="form-group">
            <label for="message">Message</label>
            <textarea class="form-control" id="subject" rows="13" placeholder="Write your message here..."></textarea>
          </div>
        </form>
        <button type="submit" class="btn btn-primary">Submit</button>
      </article>
    </div>
    <!-- End of main content section, start of footer -->
    <footer id="footer">
      <p>Copyright © 2020 Desert Water Corp</p>
    </footer>
  </header>
</div>




<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

推荐阅读