我目前正在尝试加入Web开发,因此我能得到的任何帮助都是非常感谢的。
我目前正在一个个人网页上学习,随着我前进,我现在的问题是在移动视图。在我的导航栏里有一个下拉的“社交”按钮。目前,我有这个设置,以重叠我的网页内容时,在一个较小的屏幕上,但我想知道的是,是否有可能让网页内容下滑时,下拉式菜单打开。
这是我的代码sp far:

/* Buttons */

.btn-default {
  float: right;
  width: 80px;
  font-family: 'Raleway', sans-serif;
  color: #fff;
  margin-left: 20px;
  background-color: transparent;
  border-color: #fff;
}
.btn-primary {
  margin-top: 15px;
  float: center;
  font-family: 'Raleway', sans-serif;
  color: #fff;
  background-color: transparent;
  border-color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
  color: black;
  background-color: #fff;
  border-color: gray;
}
/* End of Buttons */

/* Jumbotron */

.jumbotron {
  background-image: url(../images/rv-stars.jpg);
  background-position: 0% 97%;
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 0px;
  height: 400px;
}
.jumbotron h2 {
  font-family: 'News Cycle', sans-serif;
  color: white;
}
.jumbotron p {
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  color: white;
}
/* End of Jumbotron */

/* Nav Bar */

.navbar-default {
  border: none;
  border-radius: 0;
}
.navbar {
  background-color: transparent;
  margin-bottom: 0px;
  font-size: 15px;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  z-index: 1;
}
.navbar-default .navbar-brand {
  color: white;
  font-size: 15px;
}
.navbar-default .navbar-nav>li>a {
  color: #fff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: #37474F;
  color: #fff;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
  background-color: #37474F;
  color: #fff;
}
.dropdown-menu>li>a {
  color: fff;
  background-color: #37474F;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  background-color: #37474F;
  color: #fff;
}
.navbar-default .navbar-toggle {
  border-color: transparent;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
  background-color: #37474F;
  border-color: #37474F;
}
.container-fluid>.navbar-collapse,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container>.navbar-header {
  border-color: #263238;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
  color: #fff;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
  color: #fff;
  background-color: #263238;
}
.dropdown-menu {
  color: #fff;
  border: none;
  background-color: #37474F;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.container-fluid>.navbar-collapse,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container>.navbar-header {
  border: 0px;
}
/* End of Navbar */

/* Content */

#content-fluid {
  background-color: #263238;
  background-size: cover;
  color: white;
  padding-bottom: 15px;
}
.col-sm-4 h3 {
  font-family: 'News Cycle', sans-serif;
  text-align: justify;
}
.col-sm-4 p {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
}
#h3-adventures {
  background-color: white;
  color: midnightblue;
  font-size: 30px;
  font-weight: bold;
}
/* End of Content */

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=News+Cycle|Raleway:300" rel="stylesheet">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/style.css">
  <title>Practice</title>
</head>

<body>

  <!--Start of Jumbotron -->
  <div class="jumbotron">
    <!--Start of Nav -->
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsemenu" aria-expanded="false">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar hidden-sm hidden-md hidden-lg"></span>
            <span class="icon-bar hidden-sm hidden-md hidden-lg"></span>
            <span class="icon-bar hidden-sm hidden-md hidden-lg"></span>
          </button>
          <a class="navbar-brand hidden-xs" href="index.html">Home</a>
        </div>
        <div class="collapse navbar-collapse" id="collapsemenu">
          <ul class="nav navbar-nav">
            <li class="hidden-sm hidden-md hidden-lg"><a href="index.html">Home</a>
            </li>
            <li><a href="#">Headlines</a>
            </li>
            <li><a href="#">News</a>
            </li>
            <li><a href="#">Viral</a>
            </li>
            <li><a href="#">Blogs</a>
            </li>
            <li><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Social
<span class="caret"></span>
</a>
              <ul class="dropdown-menu">
                <li><a href="#">Email</a>
                </li>
                <li><a href="http://facebook.com">Facebook</a>
                </li>
                <li><a href="#">Twitter</a>
                </li>
                <li id="instagram"><a href="#">Instagram</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!--End of Nav -->
  </div>
  <!--End of Jumbotron -->
  <!--Start Content -->
  <div class="container-fluid" id="content-fluid">
    <div class="content container">
      <div class="row">
        <section class="col-sm-4" id="adventures">
          <h3>Share Your Adventures</h3>
          <p>Random Crap. Random Crap. Random Crap. Random Crap. Random</p>
          <button type="button" class="btn btn-primary" id="adven-btn">Read More</button>
        </section>
        <section class="col-sm-4" id="photos">
          <h3>Share Your Photos</h3>
          <p>Random Crap. Random Crap. Random Crap. Random Crap. Random</p>
        </section>
        <section class="col-sm-4" id="stories">
          <h3>Share Your Stories</h3>
          <p>Random Crap. Random Crap. Random Crap. Random Crap. Random</p>
        </section>
      </div>
    </div>
  </div>
  <!--End of Content -->





  <script src="js/jquery-3.1.1.min.js"></script>
  <script src="js/bootstrap.js"></script>
</body>

</html>

任何帮助都将不胜感激。

最佳答案

检查下面的代码片段它工作正常。
工作段

.btn-default {
  float: right;
  width: 80px;
  font-family: 'Raleway', sans-serif;
  color: #fff;
  margin-left: 20px;
  background-color: transparent;
  border-color: #fff;
}
.btn-primary {
  margin-top: 15px;
  float: center;
  font-family: 'Raleway', sans-serif;
  color: #fff;
  background-color: transparent;
  border-color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
  color: black;
  background-color: #fff;
  border-color: gray;
}
/* End of Buttons */

/Jumbotron

.jumbotron {
  background-image: url(../images/rv-stars.jpg);
  background-position: 0% 97%;
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 0px;
  height: 400px;
}
.jumbotron h2 {
  font-family: 'News Cycle', sans-serif;
  color: white;
}
.jumbotron p {
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  color: white;
}
/* End of Jumbotron */

/* Nav Bar */

.navbar-default {
  border: none;
  border-radius: 0;
}
.navbar {
  background-color: transparent;
  margin-bottom: 0px;
  font-size: 15px;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  z-index: 1;
}
.navbar-default .navbar-brand {
  color: white;
  font-size: 15px;
}
.navbar-default .navbar-nav>li>a {
  color: #fff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: #37474F;
  color: #fff;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
  background-color: #37474F;
  color: #fff;
}
.dropdown-menu>li>a {
  color: fff;
  background-color: #37474F;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  background-color: #37474F;
  color: #fff;
}
.navbar-default .navbar-toggle {
  border-color: transparent;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
  background-color: #37474F;
  border-color: #37474F;
}
.container-fluid>.navbar-collapse,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container>.navbar-header {
  border-color: #263238;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
  color: #fff;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
  color: #fff;
  background-color: #263238;
}
.dropdown-menu {
  color: #fff;
  border: none;
  background-color: #37474F;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.container-fluid>.navbar-collapse,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container>.navbar-header {
  border: 0px;
}
/* End of Navbar */

/* Content */

#content-fluid {
  background-color: #263238;
  background-size: cover;
  color: white;
  padding-bottom: 15px;
}
.col-sm-4 h3 {
  font-family: 'News Cycle', sans-serif;
  text-align: justify;
}
.col-sm-4 p {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
}
#h3-adventures {
  background-color: white;
  color: midnightblue;
  font-size: 30px;
  font-weight: bold;
}
/* End of Content */

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">


           </style>
           </head>
           <body>
           <div class="jumbotron">
    <!--Start of Nav -->
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsemenu" aria-expanded="false">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar hidden-sm hidden-md hidden-lg"></span>
            <span class="icon-bar hidden-sm hidden-md hidden-lg"></span>
            <span class="icon-bar hidden-sm hidden-md hidden-lg"></span>
          </button>
          <a class="navbar-brand hidden-xs" href="index.html">Home</a>
        </div>
        <div class="collapse navbar-collapse" id="collapsemenu">
          <ul class="nav navbar-nav">
            <li class="hidden-sm hidden-md hidden-lg"><a href="index.html">Home</a>
            </li>
            <li><a href="#">Headlines</a>
            </li>
            <li><a href="#">News</a>
            </li>
            <li><a href="#">Viral</a>
            </li>
            <li><a href="#">Blogs</a>
            </li>
            <li><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Social
<span class="caret"></span>
</a>
              <ul class="dropdown-menu">
                <li><a href="#">Email</a>
                </li>
                <li><a href="http://facebook.com">Facebook</a>
                </li>
                <li><a href="#">Twitter</a>
                </li>
                <li id="instagram"><a href="#">Instagram</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!--End of Nav -->
  </div>
  <!--End of Jumbotron -->
  <!--Start Content -->
  <div class="container-fluid" id="content-fluid">
    <div class="content container">
      <div class="row">
        <section class="col-sm-4" id="adventures">
          <h3>Share Your Adventures</h3>
          <p>Random Crap. Random Crap. Random Crap. Random Crap. Random</p>
          <button type="button" class="btn btn-primary" id="adven-btn">Read More</button>
        </section>
        <section class="col-sm-4" id="photos">
          <h3>Share Your Photos</h3>
          <p>Random Crap. Random Crap. Random Crap. Random Crap. Random</p>
        </section>
        <section class="col-sm-4" id="stories">
          <h3>Share Your Stories</h3>
          <p>Random Crap. Random Crap. Random Crap. Random Crap. Random</p>
        </section>
      </div>
    </div>
  </div>
  <!--End of Content -->


  </body>
  </html>

10-05 20:30
查看更多