0
ブートストラップモバイルビューでの間隔の問題を修正する方法を教えてください。私のウェブサイトはデスクトップ上で完璧に動作しますが、モバイルビューで見ると、ナビゲーションバーのメニューリンクとナビゲーションバーの間にスペースがあります。私はデスクトップビューでいくつかのマージンを使用していたので、それがそれをやっている理由だと思うが、どうすれば両方のために動作させることができるのだろうか？ここでカスタムスタイリングの後、モバイルビューでブートストラップナビが正しく動作しない
は私のhtmlです：ここでは
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Champs Haircuts</title>
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="scripts.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
</head>
<body>
<nav id="myNavBar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand">
<img class="img-responsive" src="images/logo.png" alt="">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" id="mainNavbar">
<li><a href="services.html">Services & Pricing</a></li>
<li id="contactLink"><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="modal fade" id="callToActionModal" role="dialog">
<div class="modal-dialog">
<!--Modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close">×</button>
<h2 class="text-center modal-title">Champs Haircuts</h2>
</div>
<div class="modal-body">
<h2 class="text-center">Call 847-677-2768</h2>
<p class="text-center">5113 Brown St, Skokie, IL 60077</p>
</div>
</div>
</div>
</div>
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<div class="col-xs-12 col-sm-8">
<h1>Welcome to<br> <span>Champs Haircuts.</span></h1>
<br>
<p>Look and Feel Like a Champion.</p>
<br>
<br>
<button id="callToActionBtn" class="btn btn-lg">Make An Appointment</button>
<div style="padding: 20px 20px"></div>
</div>
<div class="col-xs-12 col-sm-4">
<img class="img-responsive" src="images/open-hours.png" alt="open hours" height="420" width="370">
</div>
</div>
</div>
</header>
<div id="about">
<div class="container">
<div class="row">
<div id="aboutDiv" class="col-xs-12 col-sm-4 col-sm-offset-4">
<h1 class="text-center">
Our Story
</h1>
</div>
<div style="padding: 60px 60px"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<p>Are you tired of feeling like just another number at your franchise haircut shop? Are you tired of
getting the same disappointing haircut? Have you learned to make peace with it because there
possibly can't be
anything better or maybe that you have reached your max looking good potential? Well if any of those
describe you and you want to change those experiences... Then look no further and enter Champs
Haircuts!
<br><br>
We have 15 years of experience providing excellent hairstyles, quality control, and top of the line
customer service. We are a small shop located in Skokie and we treat you, how you treat you. We
refuse to treat you like just another number. Champs Haircuts... Where you come to look and feel
like a champion.
</p>
</div>
<div class="col-xs-12 col-sm-6">
<div class="text-center">
<a href="https://plus.google.com/100864823698189828429/about?pid=6176986613869798882&oid=100864823698189828429" target="_new">
<img class="img-responsive" src="images/champs-haircuts-lobby.jpg" alt="">
</a>
</div>
</div>
</div>
<hr>
</div>
</div>
<div id="testimonials">
<div class="container">
<div class="row">
<div id="testimonialsHeaderDiv" class="col-xs-12 col-sm-8 col-sm-offset-2">
<h1 class="text-center">
What People Say About Us On
<a class="underline_text" id="testimonialsYelp" href="http://www.yelp.com/biz/champs-haircuts-skokie">Yelp!</a>
</h1>
</div>
</div>
<!--
Copyright (c) 2013 Bootsnipp.com
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
documentation files (the "Software"), to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-->
<div class="row">
<div class="col-xs-12 col-md-12" data-wow-delay="0.2s">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive "
src="images/qazi.png"
alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive"
src="images/me.png"
alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive"
src="images/rand.png"
alt="">
</li>
</ol>
<!-- Carousel Slides/Quotes -->
<div class="carousel-inner text-center">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>This place is great. Lidija offers exceptional customer service. She is
extremely pleasant, gave me the best haircut I have ever received, and gives
very flattering complements.
Here are the services offered for the price of one haircut:
1. Haircut
2. Shampoo
3. Face/Scalp Massage
Oh my goodness the face massage is heaven. It feels so amazing. I sometimes
want to go back just for the massage... And did I mention I received the
best haircut ever?
Sincerely,
Qazi.
</p>
<small>Qazi</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 2 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>All my life, I always went to the neighborhood salon where I received no
haircut that I truly liked. There was always something wrong. Also, they
treated me like a number. I was just another client they needed to get done
with.
I was recommended to try out Champs Haircuts by a good friend of mine who
regularly went here for his haircuts. I was both nervous and excited at the
same time.
Now that I have had my first haircut here, I can confidently say that this
is the best haircut place I have ever been to. The whole experience was just
amazing. I never felt that good after getting a haircut. I guess It's
because I had never received a proper haircut before this.
I recommend everyone to try out Champs Haircuts. Just give it a try. Just
one try. You will not regret it.</p>
<small>Tenzin</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 3 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>I initially found out about champ's haircuts by typing "best men's haircut
near me" into a Google search. Based on the positive reviews I decided to
give it a shot. I am extremely glad I did. It's been nearly 4 years since I
started coming here and I have had a quality, professional haircut and
service every time.
Lidija takes her time and makes sure you are satisfied with your haircut
before you leave. You also get a great scalp massage and hot steam towel as
well. I recommend Lidija and champs haircuts to everyone looking for a long
term hair stylist.</p>
<small>Aida</small>
</div>
</div>
</blockquote>
</div>
</div>
<div style="padding: 90px 90px">
</div>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i
class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i
class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<br>
<div id="callToActionDiv">
<div class="container">
<div class="text-center">
<button id="callToActionBtnSecondary" class="btn btn-lg">Make An Appointment Now!</button>
</div>
</div>
</div>
<footer>
<div class="container">
<br>
<hr>
<div class="row row-content">
<div class="col-xs-12 col-sm-8">
<ul class="nav navbar-nav">
<li><a href="services.html">Services & Pricing</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-4">
<ul class="nav navbar-nav navbar-right">
<a href="https://plus.google.com/100864823698189828429/about" class="btn btn-circle" target="_new"><i class="fa fa-google-plus fa-2x"></i></a>
<a href="http://www.yelp.com/biz/champs-haircuts-skokie" class="btn btn-circle" target="_new"><i
class="fa fa-yelp fa-2x"></i></a>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
は私のCSSです：
html, body {
overflow-x: hidden;
}
body {
padding-top: 100px;
}
#myNavBar {
background-color: #006495;
height: 100px;
}
#myNavBar a {
color: white;
height: 100px;
}
.navbar-brand {
font-size: 2em;
line-height: 70px;
}
#mainNavbar > li {
font-size: 1.1em;
margin-left: 20px;
background-color: #004C70;
height: 50px;
margin-top: 20px;
border-radius: 4px;
}
#mainNavbar > li:hover {
background-color: #0093D1;
}
#mainNavbar > #contactLink {
background-color: #F4D00C;
color: black;
}
#myNavBar span {
background: white;
}
#mainNavbar > #contactLink:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
.navbar-nav > #contactLink > a {
color: #004C70;
font-weight: bold;
}
.jumbotron h1 > span{
color: #006495;
}
#callToActionBtn:hover {
background: #006495;
color: white;
font-weight: bold;
}
#callToActionBtn {
font-weight: bold;
background: white;
color: #3d3d3d;
border: 2px solid #3d3d3d;
}
#aboutDiv {
}
#about h1 {
background: #004C70;
color: white;
padding: 20px 20px;
}
#about p {
font-size: 1.4em;
font-style: normal !important;
color: #666666;
}
/* Carousel */
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 30px;
/* Control buttons */
/* Previous button */
/* Next button */
/* Changes the position of the indicators */
/* Changes the color of the indicators */
}
#quote-carousel .carousel-control {
background: none;
color: #CACACA;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
#quote-carousel .carousel-control.left {
left: -60px;
}
#quote-carousel .carousel-control.right {
right: -60px;
}
#quote-carousel .carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
#quote-carousel .carousel-indicators li {
width: 50px;
height: 50px;
margin: 5px;
cursor: pointer;
border: 4px solid #CCC;
border-radius: 50px;
opacity: 0.4;
overflow: hidden;
transition: all 0.4s;
}
#quote-carousel .carousel-indicators .active {
background: #333333;
width: 128px;
height: 128px;
border-radius: 100px;
border-color: #f33;
opacity: 1;
overflow: hidden;
}
.carousel-inner {
min-height: 300px;
}
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
#testimonialsHeaderDiv {
height: 100px;
transform: skew(-20deg);
}
#testimonials h1 {
background: #004C70;
color: white;
padding: 20px 20px;
}
#testimonials h1 a {
color: #F2635F;
}
#testimonials h1 a:hover {
cursor: pointer;
text-decoration: none;
}
.underline_text {
border-bottom: solid 2px #F2635F;
display: inline;
padding-bottom: 3px;
}
#calltoactiondiv {
background: #eeeeee;
padding: 20px 20px;
color: #333333;
}
#callToActionBtnSecondary:hover {
background: #006495;
color: white;
font-weight: bold;
}
#callToActionBtnSecondary {
font-weight: bold;
background: white;
color: #3d3d3d;
border: 2px solid #3d3d3d;
padding: 20px 35px;
}
footer .navbar-nav li{
margin-right: 20px;
}
#servicesHeader {
background: #006495;
color: #ffffff;
padding: 10px 10px;
}
/* Contact Page Styles */
#contactHeader {
background: #006495;
color: #ffffff;
padding: 10px 10px;
}
.form-horizontal input {
font-size: 1.7em;
height: 50px;
}
.form-horizontal input {
outline: none;
border-bottom: 1px solid rgb(198, 198, 198);
border-top: none;
border-right: none;
border-left: none;
box-shadow: none;
}
.form-horizontal input:focus {
border-bottom: solid 4px #F2635F;
}
.form-horizontal textarea {
font-size: 1.5em;
border-bottom: 1px solid rgb(198, 198, 198);
border-top: none;
border-right: none;
border-left: none;
box-shadow: none;
}
.form-horizontal textarea:focus {
border-bottom: solid 4px #F2635F;
}
/*
.form-horizontal p {
color: rgb(93, 107, 125);
font-size: 1.4em;
}
*/
#contactDescription {
color: rgb(93, 107, 125);
font-size: 1.4em;
}
.form-horizontal button {
background: #006495;
color: #eeeeee;
}
.form-horizontal button:hover {
background: #F2635F;
color: #F4D00C;
}
.form-control::-webkit-input-placeholder { color: rgb(93, 107, 125); }
.form-control:-moz-placeholder { color: rgb(93, 107, 125);}
.form-control::-moz-placeholder { color: rgb(93, 107, 125); }
.form-control:-ms-input-placeholder { color: rgb(93, 107, 125); }
/* Services and Pricing */
.services h2 {
color: #636466;
}
.price {
color: #636466;
font-size: 1.5em;
margin-top: 20px;
}
.serviceDescription {
font-size: 1.1em;
}
私はstackoverflowのおよびその他のリソース上でそれを見てみましたが、何も私の正確なシナリオをマッチしていません。また、480px未満の画面サイズのメディアクエリを使用しようとしました。それでも動作しません。助けを前にありがとう。ここで
あなたのCSSでのサイトdevelopertenzin.github.io/champs_haircuts
を追加していますか？ –
@sagarkodteモバイル折りたたみビューで、navbarが正しく動作していません。私はちょうどウェブサイトの現在の状態へのリンクを追加しました。 – nastypluto
折りたたみメニューに背景を追加しますか？ –