1
新的代码和Bootstrap使用在线教程。我已经创建了我的第一页，但无法使导航页脚正确对齐。我想要将电子邮件和电话号码堆叠在一个列中，并按照x xs中的LEFT排列。和FB按钮保持正确。导航页脚（对齐不良）与内容重叠？
我已经尝试了CSS上的不同方法，现在NAV页脚顶部与内容底部重叠。我不确定是否将导航栏或列表框填充的CSS搞乱了。 非常沮丧，有什么想法？
/* 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 --> \t \t
<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 --> \t \t
<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 --> \t
</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 --> \t
</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 --> \t
</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 --> \t
</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> \t
</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="#">[email protected]</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>
感谢您的意见仁，它固定在XS的重叠，但然后创建主体内容和当NAV-固定底部更大的屏幕之间有很大的差距。我想我可能不得不将其更改为nav-static-bottom – Pietryszyn
@Pietryszyn：我明白了，这就是为什么添加媒体查询的原因。看看我编辑的代码。较大的保证金值仅适用于小屏幕。 '@media（max-width：479px）' – Nhan