自定义样式后，Bootstrap Navbar在移动视图中无法正常工作
[英]Bootstrap Navbar not working properly in mobile view after custom styling
问题描述
如何解决自举移动视图中的间距问题。 我的网站可以在桌面上完美运行，但是当我在移动视图中查看时，导航栏菜单链接和导航栏本身之间存在空格。 我在桌面视图中使用了一些边距，所以我认为这就是为什么这样做，但是我如何使其同时适用于两者？
这是我的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。 它仍然不起作用。 先谢谢您的帮助。
2 个解决方案
解决方案1
2 2016-06-17 06:29:58
Please add this in your custome css file
@media screen and (max-width: 768px) {
#myNavBar {background-color: #006495;height: auto;padding: 12px 0px;}
.navbar-header{ height: 74px;}
#myNavBar a{height:auto;}
.navbar-nav {margin: 0px auto !important;}
#mainNavbar > li {margin-left: 0px;border-radius: 4px;margin-top:7px;}
#callToActionBtnSecondary{padding: 10px;}
#calltoactiondiv{padding:10px;}
#testimonials h1{padding: 0px;margin: 0px auto;}
.jumbotron{padding-top:0px !important;}
}
解决方案2
0 2016-06-17 06:00:47
在您的CSS中，从#mainNavbar> li中删除边距
并增加您的保证金
@media screen and (min-width: 768px) {
#mainNavbar > li {
margin-left: 20px;
border-radius: 4px;
}
}
Bootstrap 3导航栏在真棒字体移动视图后未显示所有详细信息
[英]Bootstrap 3 navbar not showing all the detail after font awesome mobile view
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.