导航页脚（差异对齐）与内容重叠？

时间：2016-08-07 10:28:22

标签： css twitter-bootstrap-3

使用在线教程的代码和Bootstrap新手。我已经创建了我的第一页，但我无法正确对齐导航页脚。我希望电子邮件和电话号码堆叠在一个对齐的列中，位于sm xs中。和FB按钮保持正确。

我在CSS上尝试了不同的方法，现在NAV Footers top重叠了内容底部。我不确定我是否搞砸了导航页脚或列表框填充的CSS。 非常沮丧，有什么想法吗？

xs Image fully scrolled down

Codeply code 

/* Prog Blue #1d91d3 */
/* Prog Grey #717c89 */
/* Prog Yellow #f5c014 */

/* nav background off-white */
.navbar-default {
  background-color: #FAFAFA;
}

/* nav Brand Text Color */
.navbar-default .navbar-brand {
  color: #141414;
}

/* Nav Brand Text Hover */
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #717c89;
}

/* remove Nav Carousel Gap */
.navbar {
  margin:0; /*add this*/
}

.navbar-static-top { 
  z-index: auto; 
  border-width: 0px; /* boarder around navbar */
} 

/* nav link text color black */
.navbar-default .navbar-nav > li > a {
  color: #141414;
}

/* nav link text-hover */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #717c89;
}

/* active link */
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
  color: #FFF5E6;
  background-color: #141414;
}

.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
  color: #555;
  background-color: #ff0000;
}

/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
  border-top-color: #777;
  border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
  border-top-color: #333;
  border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
  border-top-color: #555;
  border-bottom-color: #555;
}
/* mobile version */
.navbar-default .navbar-toggle {
  border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #CCC;
}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #777;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
  }
}

/* Carousel */

.carousel img {
  min-width: 100%; /* full screen width */
  margin-bottom: 20px; /* carousel body gap */
}

/*!
* Better Bootstrap Carousel V1.0.0
*
* Handcrafted by @haydennedyah from #LetsFixTheWeb
*
* Url http://LetsFixTheWeb.com
*/
.carousel-control {
  top: 0px;
  left: 0px;
  width: 20%;
  height: 100%;
  margin-top: 0px;
  font-size: 0px;
  border: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  background: none;
  opacity: 0;
}

.carousel-control.right {
  right: 0px;
  opacity: 0; /* Transparent Area Right */
}

.carousel-control.left {
  opacity: o; /* Transparent Area Left */
}

.carousel-control:hover{
  opacity: 0;
}

/* text box */
.carousel-caption {
  right: 0;
  left: 1em;
  padding: 1px;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  text-align: left;
}
/* remove carousel indicators */
.carousel-indicators {
  display: none;
}

.row {
  margin-bottom: 70px;
}

/* main body */

/* (p) */
p {
  font-size: 1.5em;
}

/* navber fixed bottom*/

.navbar-fixed-bottom {
  background-color: #141414;
  display: inline;
}

nav li {
  margin: 0;
  padding: 0 10px;
  display: inline;
}

nav ul {
  display: inline;
}

nav a {
  height: 60px;
  line-height: 60px;
  color: #717c89;
  text-decoration: none;
}

.fblink {
  float: right;
}

.fblink a {
  margin-right: 30px;
  padding: 8px 18px;
}

.fblink a:active {
  position: relative;
  bottom: 2px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-static-top">

  <div class="container">

    <div class="navbar-header">
      <a class="navbar-brand" href="#">Progression</a>
      <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
    </div>

    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Physio</a></li>
        <li><a href="#">Massage</a></li>
        <li><a href="#">Beauty</a></li>
        <li><a href="#">First Aid</a></li>
      </ul>
    </div>

  </div>

</nav>

<!-- Carousel -->


<!-- opening div -->		
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox"> 

    <!-- open listbox -->
    <div class="item active">
      <img class="img-responsive" src="https://lh4.googleusercontent.com/-aCIY16PFylg/VsW6L-YwpqI/AAAAAAAAADA/wSTG1QlJLqY/w1310-h524-no/Progression_Val_dIsere.png" alt="...">
      <div class="carousel-caption">
        <h4>Physio Massage Beauty First-Aid</h4>
      </div>
    </div>

    <div class="item">
      <img src="https://lh5.googleusercontent.com/-WHXl1TAoHoQ/VsW7_mHWeQI/AAAAAAAAAEQ/nzQm8w62c3s/w1310-h524-no/Progression_Massage_Budha.png" alt="...">
      <div class="carousel-caption">
        <h4>A wide range of Massage Therapies</h4>
      </div>
    </div>

    <div class="item">
      <img src="https://lh4.googleusercontent.com/-lj7DIStRI8M/VthrRPFcQFI/AAAAAAAAAFY/2ynRLjTZTnI/w1310-h524-no/Progression_Beauty_Therapies.png" alt="...">
      <div class="carousel-caption">
        <h4>Nails - Facials - Waxing</h4>
      </div>
    </div>

  </div> <!--close listbox -->

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon" aria-hidden="true"></span> <!-- Glyphicon Cheveron Left removed -->
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon" aria-hidden="true"></span> <!-- Cheveron Right removed -->
    <span class="sr-only">Next</span>
  </a>

</div>

<!-- Home Content Container-->

<!-- container opener -->		
<div class ="container">

  <!-- open row -->
  <div class ="row">

    <!-- colums -->
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="images/physiotherapy-concept-360x165.jpg" alt="...">
        <div class="caption">
          <h3>Physiotherapy</h3>
          <p>...</p>
        </div><!-- close caption -->	
      </div><!-- close thumbnail -->
    </div><!-- close colum -->

    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="images/massage360x165.jpg" alt="...">
        <div class="caption">
          <h3>Massage</h3>
          <p>...</p>
        </div><!-- close caption -->	
      </div><!-- close thumbnail -->
    </div><!-- close colum -->

    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="images/Facial2-360x165.jpg" alt="...">
        <div class="caption">
          <h3>Beauty</h3>
          <p>...</p>
        </div><!-- close caption -->	
      </div><!-- close thumbnail -->
    </div><!-- close colum -->

    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="images/First-aid-360x165.jpg" alt="...">
        <div class="caption">
          <h3>First aid</h3>
          <p>...</p>
        </div><!-- close caption -->	
      </div><!-- close thumbnail -->
    </div><!-- close colum -->

  </div><!-- close row -->

</div><!-- close container -->


<!-- nav footer -->
<div class="navbar navbar-default navbar-fixed-bottom">

  <a href="#" class="glyphicon glyphicon-earphone pull-left"><p class="navbar-text"> +33 62738 5646</p></a> <!-- nav foot left items -->

  <div class="fblink">
    <a href="https://www.facebook.com/ProgressionPhysiotherapyMassageFirstAid/" class="fa fa-facebook-square fa-3x pull-right"></a> <!-- nav foot right items FB #x2 -->
  </div>	

</div><!-- close nav fix bottom -->

<nav class="navbar navbar-default navbar-fixed-bottom">
  <ul>
    <li><a href="#">+33 62738 5646</a></li>
    <li text-align="right"><a href="#">massage@progressionski.com</a></li>
  </ul>
  <div class="fblink"><a href="https://www.facebook.com/ProgressionPhysiotherapyMassageFirstAid/" target="_blank" class="fa fa-facebook-square fa-3x pull-right"></a> <!-- nav foot right items FB #x2 -->
  </div>
</nav>

1 个答案:

答案 0 :(得分：1)

您不应该在Bootstrap的margin-bottom类上设置row，而是将一个类添加到父“Home Content Container”（在这种情况下为container-home）并增加{{1 } margin-bottom屏幕上的值（最大宽度为479px）。

xs
/* Prog Blue #1d91d3 */
/* Prog Grey #717c89 */
/* Prog Yellow #f5c014 */

/* nav background off-white */
.navbar-default {
  background-color: #FAFAFA;
}

/* nav Brand Text Color */
.navbar-default .navbar-brand {
  color: #141414;
}

/* Nav Brand Text Hover */
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #717c89;
}

/* remove Nav Carousel Gap */
.navbar {
  margin: 0; /*add this*/
}

.navbar-static-top { 
  z-index: auto; 
  border-width: 0; /* boarder around navbar */
} 

/* nav link text color black */
.navbar-default .navbar-nav > li > a {
  color: #141414;
}

/* nav link text-hover */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #717c89;
}

/* active link */
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
  color: #FFF5E6;
  background-color: #141414;
}

.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
  color: #555;
  background-color: #ff0;
}

/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
  border-top-color: #777;
  border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
  border-top-color: #333;
  border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
  border-top-color: #555;
  border-bottom-color: #555;
}
/* mobile version */
.navbar-default .navbar-toggle {
  border-color: #ddd;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #ddd;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ccc;
}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #777;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
  }
}

/* Carousel */

.carousel img {
  min-width: 100%; /* full screen width */
  margin-bottom: 20px; /* carousel body gap */
}

/*!
* Better Bootstrap Carousel V1.0.0
*
* Handcrafted by @haydennedyah from #LetsFixTheWeb
*
* Url http://LetsFixTheWeb.com
*/
.carousel-control {
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
  margin-top: 0;
  font-size: 0;
  border: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  background: none;
  opacity: 0;
}

.carousel-control.right {
  right: 0;
  opacity: 0; /* Transparent Area Right */
}

.carousel-control.left {
  opacity: 0; /* Transparent Area Left */
}

.carousel-control:hover{
  opacity: 0;
}

/* text box */
.carousel-caption {
  right: 0;
  left: 1em;
  padding: 1px;
  bottom: 0;
  background: rgba(0, 0, 0, .2);
  text-align: left;
}
/* remove carousel indicators */
.carousel-indicators {
  display: none;
}


/* main body */

/* (p) */
p {
  font-size: 1.5em;
}

/* navber fixed bottom*/

.navbar-fixed-bottom {
  background-color: #141414;
  display: inline;
}

nav li {
  margin: 0;
  padding: 0 10px;
  display: inline;
}

nav ul {
  display: inline;
}

nav a {
  height: 60px;
  line-height: 60px;
  color: #717c89;
  text-decoration: none;
}

.container-home {
  margin-bottom: 70px;
}
@media (max-width: 479px) {
  .container-home {
    margin-bottom: 120px;
  }
}

.fblink {
  float: right;
}

.fblink a {
  margin-right: 30px;
  padding: 8px 18px;
}

.fblink a:active {
  position: relative;
  bottom: 2px;
}

相关问题
最新问题