如何使用引导程序将移动导航栏与徽标对齐

时间：2017-03-30 01:55:50

标签： html css mobile alignment nav

我正在编辑模板，在移动设备上查看时，我无法在导航菜单按钮旁边对齐我的徽标。它也略微覆盖了移动设备上的标题图像。

Mobile view

Desktop view

非常感谢任何帮助！这是我的代码：

＆＃13;
＆＃13; 
@import url(http://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800);
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200,700);


/*************************
*******Typography******
**************************/

body {
  font-family: 'Dosis', sans-serif;
  font-size: 17px;
  color: #fff
}


.btn {
  border-radius: 0;
  font-family: 'Yanone Kaffeesatz','sans-serif';
  font-size: 20px;
  padding: 9px 23px;
}

a {
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
}

a:focus,
a:hover {
  text-decoration: none;
  outline: none
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Yanone Kaffeesatz', 'sans-serif';
  font-weight: 300;
  text-transform: uppercase;
}

h2 {
  font-size: 36px
}

.navbar-toggle {
  margin-top: 12px
}

.navbar-toggle .icon-bar {
  background-color: #fff;
}

.navbar-toggle,
.navbar-toggle:focus {
  border:1px solid #fff;
  outline: none;
}


/*************************
*******Header CSS******
**************************/

.header-top {
  display: block;
  overflow: hidden;
  padding: 25px;
}

.main-nav {
  position: absolute;
  width: 100%;
  z-index: 999;
}

.main-nav
.container {
  width: 100%
}

.social-icons a {
  font-size: 18px;
  color: #fff;
  padding-left:20px;
}

.social-icons .fa-facebook:hover {
  color: #3B5997
}

.social-icons .fa-twitter:hover {
  color:#29C5F6
}

.social-icons .fa-google-plus:hover {
  color:#D13D2F
}

.social-icons .fa-youtube:hover{
  color: #ec5538
}

.navbar-brand {
  background-color: #ff0080;
  height: 90px;
  margin-bottom: 20px;
  position: relative;
  width: 435px;
}

.navbar-brand img {
  position: absolute;
  top: -35px;
}

.navbar-right {
  background-color: #ff0080;
  padding:0 95px 0 0;
  opacity: .9
}

.navbar-right li a {
  padding: 35px 21px;
  font-size: 22px;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Yanone Kaffeesatz', 'sans-serif';
  font-weight: 300;
}

.navbar-right li a:hover,
.navbar-right li a:focus,
.navbar-right .active a {
  background-color: #fff;
  color: #16728f
}


.fixed-menu {
  background-color: #ff0080;
  position: fixed;
  top: 0;
}

.fixed-menu .navbar-right {
  padding: 0;
}


.fixed-menu .navbar-right li a {
  font-size: 18px;
  padding: 20px 25px;
  text-shadow:inherit;
}

.fixed-menu .navbar-brand {
  height: 60px;
  margin-top: 0;
  padding: 0;
  margin-bottom: 0;
  width: 435px;
}

.fixed-menu .navbar-brand img {
  height:60px;
  top: 0;
}

.fixed-menu .header-top {
  display: none;
}



/*************************
*******Home CSS******
**************************/

#home {
  position: relative;
  overflow: hidden;
}

#main-slider img {
  width: 100%
}

#main-slider
.carousel-caption {
  background: none repeat scroll 0 0 #000000;
  bottom: 14%;
  float: left;
  left: 0;
  opacity: 0.8;
  padding:10px 60px 35px;
  right: inherit;
  text-transform: uppercase;
  color: #fff;
  text-align: left;
}


#main-slider
.carousel-caption h2 {
  font-size: 38px;

}

#main-slider
.carousel-caption h4 {
  font-size: 24px;
}

#main-slider
.carousel-caption a {
  font-size: 22px;
  color: #2da1c5
}

#main-slider
.carousel-caption a:hover {
  color: #2588a6
}

#main-slider
.carousel-caption a:hover i {
  margin-left: 35px
}

#main-slider
.carousel-caption a i {
  margin-left: 15px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#main-slider
.carousel-indicators li {
  background-color:#ff0080;
  border: 1px solid #ff0080;
}

#main-slider
.carousel-indicators li.active {
  background-color:#fff;
  border: 1px solid #fff;
}

/*************************
*******Explore CSS******
**************************/

#explore {
  background-color: #C34C39;
  background-image: url("../images/event-bg.jpg");
  background-position: center bottom;
  background-size: contain;
  background-repeat:no-repeat;
  position: relative;
  overflow: hidden;
  padding: 130px 0 100px;
}

.watch {
  position: absolute;
  left: 0;
  top: 7%;
}

#explore h2 {
  font-size: 42px;
  text-transform: uppercase;
  text-align: center;
}

#countdown {
  display: block;
  overflow: hidden;
  text-align: center;
  padding: 0
}

#countdown li {
  list-style: none;
  display:inline-block;
  margin-right: 40px;
  text-align: center;
  text-transform: uppercase;
  font-size: 18px;
  position: relative;
}

#countdown li:last-child {
  margin-right: 0
}

#countdown li span {
  display: block;
  font-size: 40px;
  font-weight: 700;
  height: 82px;
  line-height: 79px;
  width: 75px;
  border-radius: 10px;
  border-right: 1px solid #c34c39;
  border-bottom: 1px solid #c34c39;
}

#countdown li .days {
  background-color: #45b29d;
  border-top: 1px solid #c34c39;
  border-left: 1px solid #c34c39;
}

#countdown li .hours {
  background-color: #efc94c;
  border-top: 1px solid #c34c39;
  border-left: 1px solid #c34c39;
}

#countdown li .minutes {
  background-color: #e27a3f;
  border-top: 1px solid #c34c39;
  border-left: 1px solid #c34c39;
}

#countdown li .seconds {
  background-color: #df5a49;
  border-top: 1px solid #c34c39;
  border-left: 1px solid #c34c39;
}

#countdown li:before {
  background-color: #c34c39;
  content: "";
  height: 11px;
  left: 0;
  position: absolute;
  top: 36px;
  width: 1px;
}

#countdown li:after {
  background-color: #c34c39;
  content: "";
  height: 11px;
  right:0;
  position: absolute;
  top: 36px;
  width: 1px;
}

.cart {
  background-color: #b34534;
  position: absolute;
  right:-200px;
  top: 37%;
  width:252px;
   -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
}

.cart:hover {
  right:0;
}


.cart a {
  color: #FFFFFF;
  display: block;
  font-size: 24px;
  text-transform: uppercase;
}

.cart a i {
  font-size: 30px;
  padding: 20px 12px;
  background-color: #A64030;
  margin-right: 3px;
}



 /*************************
*******Event CSS******
**************************/
#event {
  background-color: #33888F;
  background-image: url("../images/performar-bg.jpg");
  background-position: 50% 0;
  background-size: contain;
  position: relative;
  background-repeat: no-repeat;
}

.guitar {
  position: absolute;
  right:0;
  top: 0
}


#event h2 {
  color: #FFFFFF;
  font-size: 36px;
  font-weight: 300;
  margin-bottom: 40px;
  margin-top: 70px;
  text-transform: uppercase;
}

.single-event {
  margin-bottom: 70px;
}

.single-event h4 {
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 300;
  line-height: 26px;
  margin-top: 25px;
  text-transform: uppercase;
}


.single-event h5 {
  font-size: 18px;
  font-weight: 100;
  display: block;
}

#event-carousel {
  position: relative;
}

.even-control-left,
.even-control-right {
  position: absolute;
  font-size: 24px;
  color: #fff;
  top: 0;
}

.even-control-left {
  right: 3%
}

.even-control-right {
  right: 0;
}


/*************************
*******About CSS**********
**************************/

#about {
  background-color: #75B46E;
  position: relative;
  width: 100%;
  display: flex;
}

.guitar2 {
  top: 0;
  width: 50%;
}

.guitar2 img {
  padding-top: 3%;
}

.about-content {
  width: 50%;
   background-image: url("../images/about-bg.jpg");
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 70px 70px 110px;
}


#about h2 {
  margin-bottom: 23px;
}

.about-content p {
  font-size: 17px;
  font-family: 'Dosis',sans-serif;
}

#about .btn-primary {
  background-color: #137c61;
  color: #fff;
  text-transform: capitalize;
  border: none;
  margin-top: 28px;
}

#about .btn-primary:hover {
  background-color: #126d55
}



/*************************
******Twitter CSS****
**************************/

#twitter {
  background-color: #ecedef;
  background-image: url("../images/twitter-bg.jpg");
  background-position: center bottom;
  background-size: cover;
  background-repeat:no-repeat;
  position: relative;
  padding: 95px 0 90px;
  overflow: hidden;
}

.twit {
  position: absolute;
  left: 0;
  top:-42%;
}

#twitter-feed .item {
  text-align: center;
}

#twitter-feed .item img {
  display: inline-block;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background-color: #c5c8ce;
  padding: 5px;
  margin-bottom: 30px;
}

#twitter-feed .item a,
#twitter-feed .item p {
  font-size: 24px;
  font-weight: 300;
  font-family: 'Yanone Kaffeesatz','sans-serif';
}

#twitter-feed .item p {
  color: #3D3D3D;
}

#twitter-feed .item a {
  color:#00c3ff;
}

.twitter-control-left,
.twitter-control-right {
  position: absolute;
  color: #00c3ff;
  top: 59%;
  font-size: 24px
}

.twitter-control-left {
  left: 0;
}

.twitter-control-right {
  right:0;
}



/*************************
******Sponsor CSS****
**************************/

#sponsor {
  background-color: #1881a2;
  background-image: url("../images/sponsor-bg.jpg");
  background-position:50% 0;
  background-size: cover;
  background-repeat:no-repeat;
  position: relative;
}

.light {
  position: absolute;
  right: 0;
  bottom: 0;
}

#sponsor .col-sm-10 {
  z-index: 10;
}

#sponsor h2 {
  margin-top: 90px;
  margin-bottom: 40px;
}

#sponsor .item ul {
  font-size: 0;
  padding: 0;
}


#sponsor .item ul li {
  display: inline-block;
  list-style: none;
  width: 33.33%;
  margin-bottom: 75px;
}

#sponsor .item ul li:last-child {
  margin-right: 0
}

.sponsor-control-left,
.sponsor-control-right {
  color: #FFFFFF;
  font-size: 24px;
  position: absolute;
  top: 20%;
}

.sponsor-control-left {
  right: 12%
}

.sponsor-control-right {
  right: 10%
}


/*************************
******Map CSS****
**************************/
#map {
  position: relative;
}

#gmap {
  height:450px;
}


/*************************
******Contact CSS****
**************************/

.contact-section {
  background-color: #f7ab24;
  background-image: url("../images/contact-bg.jpg");
  background-position:60% 0;
  background-size:contain;
  background-repeat:no-repeat;
  position: relative;
}

.ear-piece {
  position: absolute;
  left: 0;
  top: 0;
}

#contact .container {
  padding-top:47px;
}

#contact h3 {
  text-transform:inherit;
  color: #373737;
}

#contact-section h3 {
  margin-bottom: 25px
}

#contact address {
  font-size: 18px;
  color: #373737;
}

.contact-text {
  margin-bottom: 35px;
  display: block;
}


#contact-section .form-control {
  border-color: #ae750d;
  box-shadow:none;
  outline: 0 none;
  border-radius: 0;
  color: #797979;
  font-size: 18px;
}

#contact-section .form-control:focus {
  border-color: #ae750d;
}

#contact-section input {
  height: 44px;
}

#contact-section textarea {
  height: 90px;
  resize:none;
}

#contact-section .btn-primary {
  background-color: #373737;
  color: #f7ab24;
  border: none;
  font-size: 24px;
  padding: 6px 42px;
  margin-bottom: 110px;
  margin-top: 10px
}

#contact-section .btn-primary:hover {
  background-color: #212020;
  color: #fff
}



/*************************
******Footer CSS****
**************************/

#footer {
  background-color: #212121;
  background-image: url("../images/footer-bg.jpg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  color: #FFFFFF;
  font-size: 20px;
  padding: 35px 0;
}

#footer a {
  color:#f7ab24
}

#footer a:hover {
  color:#ff0080
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Melodie Rooker Music</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
	<link href="css/main.css" rel="stylesheet">
	<link href="css/animate.css" rel="stylesheet">
	<link href="css/responsive.css" rel="stylesheet">
  <script src="https://use.fontawesome.com/6740b2e08a.js"></script>

    <!--[if lt IE 9]>
	    <script src="js/html5shiv.js"></script>
	    <script src="js/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
</head><!--/head-->

<body>
	<header id="header" role="banner">
		<div class="main-nav">
			<div class="container">
				<div class="header-top">
					<div class="pull-right social-icons">
						<a href="https://www.facebook.com/melodierookermusic/" target="_blank"><i class="fa fa-facebook"></i></a>
						<a href="https://www.youtube.com/channel/UCP9WMJHYJqXmTCjlRxBHSfg" target="_blank"><i class="fa fa-youtube"></i></a>
						<a href="https://itunes.apple.com/mz/album/road-life-single/id1160137083" target="_blank"><i class="fa fa-apple"></i></a>
						<a href="https://open.spotify.com/artist/3FEm9jdkZSvce8HxXhfbMz" target="_blank"><i class="fa fa-spotify"></i></a>
					</div>
				</div>
		        <div class="row">
		            <div class="navbar-header">
		                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
		                    <span class="sr-only">Toggle navigation</span>
		                    <span class="icon-bar"></span>
		                    <span class="icon-bar"></span>
		                    <span class="icon-bar"></span>
		                </button>
		                <a class="navbar-brand" href="index.html">
		                	<img class="img-responsive" src="images/logo.png" alt="logo">
		                </a>
		            </div>
		            <div class="collapse navbar-collapse">
		                <ul class="nav navbar-nav navbar-right">
		                    <li class="scroll active"><a href="#home">Home</a></li>
		                    <li class="scroll"><a href="#explore">Explore</a></li>
		                    <li class="scroll"><a href="#about">Biography</a></li>
		                    <li class="no-scroll"><a href="#twitter">Sample</a></li>
		                    <li class="scroll"><a href="#contact">Contact</a></li>
		                </ul>
		            </div>
		        </div>
	        </div>
        </div>
    </header>
    <!--/#header-->

    <section id="home">
		<div id="main-slider" class="carousel slide" data-ride="carousel">
			<!-- <ol class="carousel-indicators">
				<li data-target="#main-slider" data-slide-to="0" class="active"></li>
				<li data-target="#main-slider" data-slide-to="1"></li>
				<li data-target="#main-slider" data-slide-to="2"></li>
			</ol> -->
			<div class="carousel-inner">
				<div class="item active">
					<img class="img-responsive" src="images/slider/bg1.jpg" alt="slider">
					<!-- <div class="carousel-caption">
						<h2>register for our next event </h2>
						<h4>full event package only @$199</h4>
						<a href="#contact">GRAB YOUR TICKETS <i class="fa fa-angle-right"></i></a>
					</div> -->
				</div>
				<!--<div class="item">
					<img class="img-responsive" src="images/slider/bg2.jpg" alt="slider">
					<div class="carousel-caption">
						<h2>register for our next event </h2>
						<h4>full event package only @$199</h4>
						<a href="#contact">GRAB YOUR TICKETS <i class="fa fa-angle-right"></i></a>
					</div>
				</div>
				<div class="item">
					<img class="img-responsive" src="images/slider/bg3.jpg" alt="slider">
					<div class="carousel-caption">
						<h2>register for our next event </h2>
						<h4>full event package only @$199</h4>
						<a href="#contact" >GRAB YOUR TICKETS <i class="fa fa-angle-right"></i></a>
					</div>
				</div>
			</div>
		</div> -->
    </section>
	<!--/#home-->

	<section id="explore">
		<div class="container">
			<div class="row">
				<div class="watch">
					<img class="img-responsive" src="images/watch.png" alt="">
				</div>
				<div class="col-md-4 col-md-offset-2 col-sm-5">
					<h2>Upcoming Show<br>McLeod's Publick House</h2>
				</div>
				<div class="col-sm-7 col-md-6">
					<ul id="countdown">
						<li>
							<span class="days time-font">00</span>
							<p>days </p>
						</li>
						<li>
							<span class="hours time-font">00</span>
							<p class="">hours </p>
						</li>
						<li>
							<span class="minutes time-font">00</span>
							<p class="">minutes</p>
						</li>
						<li>
							<span class="seconds time-font">00</span>
							<p class="">seconds</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="cart">
				<a href="https://www.google.com/maps/place/McLeod's+Publick+House/@31.2407451,-85.4776813,15z/data=!4m5!3m4!1s0x0:0x92b39accad44e9ce!8m2!3d31.2407451!4d-85.4776813?sa=X&ved=0ahUKEwjHvsXu8PzSAhWCxVQKHa5VBMUQ_BIIbDAK" target="_blank"><i class="fa fa-map-o"></i> <span>Get Directions</span></a>
			</div>
		</div>
	</section><!--/#explore-->

	<section id="event">
		<div class="container">
			<div class="row">
				<div class="col-sm-12 col-md-9">
					<div id="event-carousel" class="carousel slide" data-interval="false">
						<h2 class="heading">Explore</h2>
						<a class="even-control-left" href="#event-carousel" data-slide="prev"><i class="fa fa-angle-left"></i></a>
						<a class="even-control-right" href="#event-carousel" data-slide="next"><i class="fa fa-angle-right"></i></a>
						<div class="carousel-inner">
							<div class="item active">
								<div class="row">
                  <div class="col-sm-4">
										<div class="single-event">
											<img class="img-responsive" src="images/melodie-ricky.jpg" alt="Melodie and Ricky Rooker">
											<h4>Melodie and Ricky Rooker</h4>
											<h5>vocals, lead guitar</h5>
										</div>
									</div>
									<div class="col-sm-4">
										<div class="single-event">
											<img class="img-responsive" src="images/loudboyz.jpg" alt="Melodie Rooker and the Loud Boyz">
											<h4>Melodie Rooker</h4>
											<h5>and the Loud Boyz</h5>
										</div>
									</div>
									<div class="col-sm-4">
										<div class="single-event">
											<img class="img-responsive" src="images/mcleods-family.jpg" alt="We had such a blast playing at McLeod's Publick House in Dothan, AL last night! We got invited to be part of the family, which means our poster got autographed and put up on the wall!">
											<h4>McLeod's Publick House</h4>
											<h5>We became a part of the "family"</h5>
										</div>
									</div>
								</div>
							</div>
							<div class="item">
								<div class="row">
									<div class="col-sm-4">
										<div class="single-event">
											<img class="img-responsive" src="images/studio.jpg" alt="Melodie at FAME Studios in Muscle Shoals, Alabama">
											<h4>FAME Studios</h4>
											<h5>Muscle Shoals, AL</h5>
										</div>
									</div>
                  <div class="col-sm-4">
                    <div class="single-event">
                      <img class="img-responsive" src="images/ricky.jpg" alt="Ricky Rooker at FAME Studios in Muscle Shoals, Alabama">
                      <h4>FAME Studios</h4>
                      <h5>Muscle Shoals, AL</h5>
                    </div>
                  </div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="guitar">
					<img class="img-responsive" src="images/guitar.png" alt="guitar">
				</div>
			</div>
		</div>
	</section><!--/#event-->

	<section id="about">
		<div class="guitar2">
			<img class="img-responsive" src="images/guitar2.jpg" alt="guitar">
		</div>
		<div class="about-content">
					<h2>Biography</h2>
					<p><stron>Melodie Rooker is a singer/songwriter based out of Nashville, TN. She has been singing since the day she was old enough to hold a microphone, and has fronted bands in Missouri, Mississippi, and Tennessee. Her current band, the Loud Boyz, consists of a rhythm/lead guitar (Ricky Rooker), bass (Colton Everhart), and drums (Justin Parker). Melodie Rooker & the Loud Boyz play Country, Blues, & Rock 'n Roll (all the good stuff)! Their shows are extremely high energy and interactive. All in all, this 4-piece band packs a powerful punch!<br><br>Melodie & the Loud Boyz are signed with Old Dog's Records based out of Nashville, TN. They have been interviewed on KTXR FM 101.3 (The Outlaw), and Browne Hill Radio (Africa).<br><br>Melodie Rooker & the Loud Boyz can play up to a 5 hour show, and can tweak their set list to play what the particular crowd wants to hear. They are open to traveling anywhere, and are available now for booking.</strong></p>

		</div>
	</section><!--/#about-->

	<section id="twitter">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
		        <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/293251580&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
      </div>
    </div>
  </div>
	</section><!--/#twitter-feed-->

	<section id="contact">
		<!-- <div id="map">
			<div id="gmap-wrap">
	 			<div id="gmap">
	 			</div>
	    	</div>
		</div><!--/#map-->
		<div class="contact-section">
			<div class="ear-piece">
				<img class="img-responsive" src="images/ear-piece.png" alt="">
			</div>
			<div class="container">
				<div class="row">
					<div class="col-sm-3 col-sm-offset-4">
						<div class="contact-text">
							<h3>Contact</h3>
							<address>
								E-mail: melodie@melodierookermusic.com<br>
								Phone: (417) 771-9817<br>
							</address>
						</div>
						<div class="contact-address">
							<h3>Find me in</h3>
							<address>
                Nashville, TN
							</address>
						</div>
					</div>
					<div class="col-sm-5">
						<div id="contact-section">
							<h3>Send a message</h3>
					    	<div class="status alert alert-success" style="display: none"></div>
					    	<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="sendemail.php">
					            <div class="form-group">
					                <input type="text" name="name" class="form-control" required="required" placeholder="Name">
					            </div>
					            <div class="form-group">
					                <input type="email" name="email" class="form-control" required="required" placeholder="Email">
					            </div>
					            <div class="form-group">
					                <textarea name="message" id="message" required="required" class="form-control" rows="4" placeholder="Enter your message"></textarea>
					            </div>
					            <div class="form-group">
					                <button type="submit" class="btn btn-primary pull-right">Send</button>
					            </div>
					        </form>
					    </div>
					</div>
				</div>
			</div>
		</div>
	</section>
    <!--/#contact-->

    <footer id="footer">
        <div class="container">
            <div class="text-center">
                <p> Copyright  &copy;2017 Melodie Rooker All Rights Reserved</p>
            </div>
        </div>
    </footer>
    <!--/#footer-->

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  	<script type="text/javascript" src="js/gmaps.js"></script>
	<script type="text/javascript" src="js/smoothscroll.js"></script>
    <script type="text/javascript" src="js/jquery.parallax.js"></script>
    <script type="text/javascript" src="js/coundown-timer.js"></script>
    <script type="text/javascript" src="js/jquery.scrollTo.js"></script>
    <script type="text/javascript" src="js/jquery.nav.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

您正在使用Bootstrap，但您没有充分利用Bootstrap's Grid System和定位。

您还可以查看Bootstrap Examples以查找可以查看，复制和使用的现有HTML结构。

在您的情况下，问题是您的.navbar-brand使用固定宽度而不是以百分比设置的响应宽度。这意味着当您将客户端窗口缩小到移动大小时，您的CSS仍然会说您的.navbar-brand假设为width: 435px;，这使得按钮显示在同一行上的空间太小。

如果您不想使用我上面链接的Bootstrap Exampels，或者我也链接到上面的Bootstrap网格系统，您可以使用CSS Media Query解决此问题。

例如：

@media(max-width: 767px) {
    .navbar-brand {
        width: 300px;
    }
}

每当设备的宽度小于768px（通常被视为移动设备）时，这会将.navbar-brand的宽度更改为300px。但是，如果您已经在使用Bootstrap，我建议您查看两个第一个链接。

相关问题
最新问题