为什么sidenav中的文本在一定的屏幕宽度下消失了？

时间：2019-01-14 19:01:50

标签： html css bootstrap-4

前言：这是我尝试开发的第一个网站，因此我犯了很多小错误，需要一段时间才能找到。 sidenav保持不变，submit按钮保持不变，但是当我低于某个屏幕尺寸时，复选框及其文本将消失。我认为这可能与字体大小有关，因为如果我将所有内容都做得足够小，当我在浏览器窗口中“ cmd-”时，文本就会出现。

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
html, body, h1 {
  font-family: 'Poppins', sans-serif;
  color: #222;
}

h1{
  font-weight: 2000;
  font-stretch: expanded;
  font-size:2em;
}
a:link, a:visited{
  color: white;
}
a:hover{
  color: green;
}
.navbar {
  padding: .8rem;
}
.navbar-nav li{
  padding-right: 20px
}
.nav-link{
  font-size: 1.1rem !important;
}
.carousel-inner img {
  width: 100%;
  height: 100%;
}
.carousel-caption {
  position: absolute;
  top:49%;
  transform: translateY(-95%);
}
.carousel-caption h6{
  color: white;
  background-color: rgba(150, 100, 150, 0.5);  /* 50% transparent */
  font-family: sans-serif;
  font-weight: 1000;
  border-radius: 25px;
  padding: 5px;
}
.sidenav{
  width: 150px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 75px; 
  padding-top: 5px;
  background-color: rgba(50,50,50, 0.5);  /* 50% transparent */
}
.carousel-caption h2{
  font-family: sans-serif;
  color: black;
  font-weight: 500
}
.btn-primary{
  background-color: #6648b1;
  border: 1px solid #6648b1;
}
.row{
  margin-top: 20px;
  margin-left: 400px;
  padding: 10px;
}
.brn-primary:hover{
  background-color: #563d7c;
  border: 1px solid #563d7c;
}
.jumbotron {
  padding: 1rem;
  border-radius: 0;
}
.padding {
  padding-bottom: 2rem;
}
.welcome {
  width: 75%;
  margin: 0 auto;
  padding-top: 2rem;
}
.welcome hr{
  border-top: 2px solid #b4b4b4;
  width:95%;
  margin-top: .3rem;
  margin-bottom: 1rem;
}

.fa-facebook, .fa-instagram, .fa-youtube{
  font-size: 2em;
  margin: 1rem;
}
.fa-facebook{
  color: white;
}
.fa-instagram{
    color: grey;
}
.fa-youtube{
  color: red;
}
.social a{
  font-size: 4.5em;
  padding: 3rem;
}

/* screen size xs */
@media (min-width: 1px) and (max-width: 499px){
  .carousel-caption h6{
    font-size: .75rem;
    padding: 0px;
  }
  .carousel-caption h2{
    font-size: 1rem;
  }
  p{
    font-size: 1.5rem;
  }
  h1{
    font-size: 1rem;
  }
}
/* screen size sm */
@media (min-width: 500px) and (max-width:714px){
  .carousel-caption h6{
    font-size: 1.35rem;
  }
  .carousel-caption h2{
    font-size: 1.85rem;
  }
  p{
    font-size: 2rem;
  }
  p.lead{
    font-size: 2rem;
  }
  h1{
    font-size: 2rem;
  }
}
/* screen size md */
@media (min-width: 715px) and (max-width: 1200px){
  .carousel-caption h6{
    font-size: 1.5rem;
  }
  .carousel-caption h2{
    font-size: 3rem;
  }
  p{
    font-size: 1.5rem;
  }
  p.lead{
    font-size: 1rem;
  }
  h1{
    font-size: 3rem;
  }
}

/* screen size lg+*/
@media (min-width: 1201px){
  .carousel-caption h6{
    font-size: 2.5rem;
  }
  .carousel-caption h2{
    font-size: 4rem;
  }
  p.lead{
    font-size: 2rem;
  }
  p{
    font-size: 2.5rem;
  }
  h1{
    font-size: 4rem;
  }
}
<!doctype html>
<html lang="en">
<head>
    <title>Order</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <a href="https://www.facebook.com/Hodels-Greenery-593588274426579/"><i class="fab fa-facebook" ></i></a>
        <a href="https://www.instagram.com/hodelsgreenery/"><i class="fab fa-instagram"></i></a>
        <a href="https://www.youtube.com/channel/UC7c9OnRT41YRXULZFX097Vg?view_as=subscriber"><i class="fab fa-youtube"></i></a>
      </div>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse text-right" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="index.html" aria-selected="true">
            Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="missionstatement.html" aria-selected="false">
            Mission Statement</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html" aria-selected="false">
            Contact</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" id="navbarDropdownMenuLink" data-toggle="dropdown"  aria-selected="false" aria-haspopup="true" aria-expanded="false">
              Gallery</a>
            <div class="dropdown-menu bg-dark" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" role="menuitem" href="#">
              Currently Growing</a>
            <a class="dropdown-item" role="menuitem" href="#">
              Ready to seed</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="types.html">Order</a>
        </li>
      </div>
    </div>
  </nav>
  <div class="sidenav">
    <form>
      <a href="#purpleK" class="nav-link d-none d-sm-inline"><input type="checkbox" name="green1" value="Purple Kohlrabi">
        Purple Kohlrabi</a><br>
      <a href="#hongVit" class="nav-link d-none d-sm-inline"><input type="checkbox" name="radish" value="Hong Vit">
        Radish, Hong Vit</a><br>
      <a href="#redRubin" class="nav-link d-none d-sm-inline"><input type="checkbox" name="cabbage" value="Golder Arc">
        Cabbage, Golden Arc</a><br>
      <a href="#goldenArc" class="nav-link d-none d-sm-inline"><input type="checkbox" name="shiso" value="Britton">
        Shiso, Britton</a><br>
      <a href="#brittonShiso" class="nav-link d-none d-sm-inline"><input type="checkbox" name="mustard" value="Mizuna">
        Mustard, Mizuna</a><br>
      <a href="#mizuna" class="nav-link d-none d-sm-inline"><input type="checkbox" name="green2" value="Sunflower">
        Sunflower</a><br>
      <input type="submit">
    </form>
  </div>
  <div class="container-fluid pading text-right">
    <div class="row">
      <!-- Consistant types -->
      <div class="col-md-6 col-lg-4">
        <div id="purpleK">
          <img src="images/IMG_2937.jpg" alt="Purple Kohlrabi" width="300" height="200" <br>
          <h6>KOHLRABI, PURPLE</h6>
        </div>
        <div id="hongVit">
          <img src="images/IMG_2946.jpg" alt="Hong Vit Radish" width="300" height="200" <br>
          <h6>RADISH, HONG VIT</h6>
        </div>
      </div>
      <!-- special grow need to be planted -->
      <div class="col-md-6 col-lg-4">
        <div id="redRubin">
          <img src="images/IMG_2953.jpg" alt="Red Rubin Basil" width="300" height="200" <br>
          <h6>BASIL, RED RUBIN</h6>
        </div>
        <div id="brittonShiso">
          <img src="images/IMG_2986.jpg" alt="Britton Shiso" width="300" height="200" <br>
          <h6>SHISO, BRITTON</h6>
        </div>
      </div>
      <!-- Special order have to order seeds -->
      <div class="col-md-12 col-lg-4">
        <div id="goldenArc">
          <img src="images/IMG_2978.jpg" alt="Golden Arc Cabbage" width="300" height="200" <br>
          <h6>CABBAGE, GOLDEN ARC</h6>
        </div>
        <div id="mizuna">
          <img src="images/IMG_2991.jpg" alt="Mizuna" width="300" height="200" <br>
          <h6>MUSTARD, MIZUNA</h6>
        </div>
      </div>
    </div>
  </div>
  <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>
</body>
</html>

1 个答案:

答案 0 :(得分：2)

这里的键是d-none d-sm-inline，表示display: none，但如果屏幕尺寸> 576px，则是display: inline。这就是为什么当屏幕尺寸小于576像素时它会消失的原因。如果您不希望它消失，请删除d-none。

相关问题
最新问题