Bootstrap 同时两个导航栏类别

y4ekin9u 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(259)

我下载并编辑了一个网页。该网页有一个使用（<ul class="nav nav-justified">）代码的导航栏。当浏览器窗口小于768px时，菜单项一个列在另一个下面，这使得视图非常糟糕。
是否可以在小屏幕上制作折叠导航栏，同时在大屏幕上调整导航栏？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form - Simplex</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/justified.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div id="container" class="container">

        <a href="#"><img src="images/templatemo_header.jpg" alt="Simplex Responsive Template" class="img-responsive" /></a>

        <ul class="nav nav-justified">
          <li><a href="index.html">Home</a></li>
          <li><a href="products.html">Products</a></li>
          <li><a href="services.html">Services</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="about.html">About Us</a></li>
          <li class="active"><a href="contact.html">Contact</a></li>
        </ul>

        <div class="row space30"> <!-- row 1 begins -->

            <div class="col-md-6">
              <h2>Etiam in tortor ac augue varius</h2>
                <p>Donec pharetra augue at hendrerit dignissim. Vivamus ultrices, justo non malesuada dignissim, lectus sapien pellentesque velit, sit amet gravida dui turpis ac sem. Vestibulum eget dui ipsum. Quisque tincidunt turpis eleifend, facilisis quam vitae, rhoncus nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at erat vitae lacus bibendum malesuada quis quis neque. Validate <a href="http://validator.w3.org/check?uri=referer" rel="nofollow">XHTML</a> &amp; <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow">CSS</a>.</p>
                <p>Phasellus molestie porttitor dolor nec rhoncus. Mauris purus tellus, gravida blandit placerat sed, ullamcorper ac eros. Proin posuere, quam quis lobortis auctor, magna sem congue metus, eu auctor nibh velit id quam.</p>

                <h3>Office One</h3>
                <p>120-240 Ut quis faucibus augue,<br>
                In ac lectus mollis, ornare ipsum,<br>
                lacinia velit, 10660</p>

                <h3>Office Two</h3>
                <p>36-101 Integer accumsan,<br>
                diam sit amet aliquam aliquam,<br>
                est dui iaculis diam, 10220.</p>
            </div>

            <div class="col-md-6">
                <h2>Contact Us</h2>
                <p>You may send us a message below.</p>

                <form role="form">
                  <div class="form-group">
                    <label for="name">Name:</label>
                    <input name="name" type="text" class="form-control" id="name" placeholder="Enter your name">
                  </div>
                  <div class="form-group">
                    <label for="email">Email:</label>
                    <input name="email" type="email" class="form-control" id="email" placeholder="Enter email">
                  </div>
                  <div class="form-group">
                    <label for="subject">Subject:</label>
                    <input name="subject" type="text" class="form-control" id="subject" placeholder="Enter your subject">
                  </div>
                  <div class="form-group">
                    <label for="message">Message:</label>
                    <textarea name="message" rows="5" class="form-control" id="message" placeholder="Enter your message"></textarea>
                  </div>
                  <div class="checkbox">
                    <label>
                      <input name="newclient" type="checkbox" id="newclient" value="new"> I am new client.
                    </label>
                  </div>
                  <button type="submit" class="btn btn-default">Submit</button>
                </form>

           </div>

        </div> <!-- /row 1 -->

      <!-- Site footer -->
      <div class="footer">
        <p>Copyright © 2072 Company Name</p>
      </div>

    </div> <!-- /container -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
  </body>
</html>

对齐的. css文件

/* 
Simplex Template 
http://www.templatemo.com/preview/templatemo_382_simplex 
*/

body {

}

a:hover { color: #090; }

.space30 { margin-top: 30px; }

.row ul { padding-left: 30px; }

.clear { clear: both; }

.float_left { float: left; }
.float_right { float: right; }

.img_left_gallery { float: left; margin: 12px; padding: 8px; border: 1px solid #CCC; }

.img_left { float: left; margin-right: 20px; margin-bottom: 15px; }

.img_right { float: right; margin: 0px 0px 15px 20px; }

.img_bottom { margin-bottom: 15px; }

.footer {
  border-top: 1px solid #eee;
  margin-top: 40px;
  padding-top: 20px;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  background-color: transparent;
  height: 0px;
}
/* Customize the nav-justified links to be fill the entire space of the .navbar */

.nav-justified {
  background-color: #006699;
  border-radius: 6px;
  border: 1px solid #006699;
}

.nav-justified > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
  color: #FFFFFF;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #005588;
  background-color: #006699; /* Old browsers */
  background-repeat: repeat-x; /* Repeat the gradient */
  background-image: -moz-linear-gradient(top, #0099FF 0%, #006699 100%); /* FF3.6+ */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0099FF), color-stop(100%,#006699)); /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(top, #0099FF 0%,#006699 100%); /* Chrome 10+,Safari 5.1+ */
  background-image: -ms-linear-gradient(top, #0099FF 0%,#006699 100%); /* IE10+ */
  background-image: -o-linear-gradient(top, #0099FF 0%,#006699 100%); /* Opera 11.10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0099FF', endColorstr='#006699',GradientType=0 ); /* IE6-9 */
  background-image: linear-gradient(top, #0099FF 0%,#006699 100%); /* W3C */
}

.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
  color: #000000;
  background-color: #22BBFF;
  background-image: none;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.25);
}

.nav-justified > li > a:hover { 
    color: black;
    background-color: #22BBFF; 
    background-image: none;
    box-shadow: inset 0 3px 7px rgba(0,0,0,.25);
}

.nav-justified > li:first-child > a {
  border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
  border-bottom: 0;
  border-radius: 0 0 5px 5px;
}

@media (min-width: 768px) {
  .nav-justified {
    max-height: 52px;
  }
  .nav-justified > li > a {
    border-left: 1px solid #0099FF;
    border-right: 1px solid #005588;
  }
  .nav-justified > li:first-child > a {
    border-left: 0;
    border-radius: 5px 0 0 5px;
  }
  .nav-justified > li:last-child > a {
    border-radius: 0 5px 5px 0;
    border-right: 0;
  }
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  /* Remove the padding we set earlier */
  .masthead,
  .marketing,
  .footer {
    padding-left: 0;
    padding-right: 0;
  }
}

twitter-bootstrap

来源：https://stackoverflow.com/questions/31087043/two-navbar-classes-at-the-same-time

1条答案

按热度按时间

f2uvfpb91#

嗨，首先你只需要添加一个菜单图标，你将使用屏幕分辨率低于768px，并编写一小段jquery来切换或折叠导航栏的点击。请参见下面的例子，你的答案：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
#togglebutton{display:none;}

@media screen and (max-width="786"){
#togglemenu{display:none;}
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
 jQuery("#togglebutton").click(function(){
    jQuery("#togglemenu").slideToggle("slow");
  });
  });
</script>
</head>
<body>
<div id="togglebutton"><img src="menu_icon.png"></div>
<ul id="togglemenu" class="nav nav-justified">
<li>Test li</li>
<li>Test li</li>
<li>Test li</li>
<li>Test li</li>
</ul>
</body>
</html>

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 同时两个导航栏类别

1条答案

相关问题

热门标签

最新问答