2
私は現在、Web Developmentを利用して遊んでいます。ドロップダウンが選択されたときにMobile Viewでコンテンツをドロップする
私は現在、個人的なページに取り組んでいます。私はその時に覚えている問題をモバイルビューで知っています。私のNavbarでは "Social"ボタンをドロップダウンしています。現在のところ、小さな画面ではページの内容が重なるように設定されていますが、ドロップダウンを開いたときにページコンテンツをスライドさせることができたかどうかは疑問です。
これは、SPまでのところ私のコードです：
/* 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>すべてのヘルプは大規模いただければ幸いです。