1
正如你可以看到上面的圖片，我要對齊在圈內也是對的，我試圖爲字體真棒，但它不工作的圖標文本。有人能幫我嗎？或者給我一些想法如何去做。
這是我的html代碼。
<nav class="navbar navbar-default navbar-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
<span class="icon-bar" ></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="img-responsive" src="images/brandz.png" >
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Students</a></li>
<li><a href="#">Faculty</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a data-toggle="modal" href="#myModal" ><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</nav>
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4">
<h4>GAPC MISSION & VISION</h4>
<h4>Mission</h4>
<p>To provide affordable learning with emphasis on relevant, innovative and quality academic programs and services.</p>
<br>
<h4>Vision</h4>
<p>A model learning institution that makes a positive difference and is responsive to the needs of the global community.</p>
</div>
<div class="footer-col col-md-4">
<h4>CORE VALUES</h4>
<h4>G - God Fearing</h4>
<h4>A - Achiever</h4>
<h4>P - Purpose Driven</h4>
<h4>C - Committed Leadership</h4>
</div>
<div class ="footer-col col-md-4">
<h4>GAPC SUPPORT</h4>
<h4 class ="fa fa-map-marker">Address</h4>
<p>1045 M. Naval St., San Jose, Navotas City</p>
<h4 class ="fa fa-phone">Tel No.</h4>
<p>282-9035/282-9036/282-2940</p>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright © 2016. Governor Andres Pascual College. All Rights Reserved
</div>
</div>
</div>
</div>
</footer>
這裏是我的CSS
.navbar-default .navbar-nav > li > a {
font-weight: 590;
color: #949494;
display: block;
padding: 5px 35px 2px 45px;
border-bottom: 3px solid transparent;
line-height: 97px;
text-decoration: none;
transition: border-bottom-color 0.5s ease-in-out;
-webkit-transition: border-bottom-color 0.5s ease-in-out;
}
.navbar-default{
background-color:#fff;
}
.nav>li>a {
position: relative;
}
.navbar-default .navbar-right > li > a {
padding-left: 70px;
padding-right: 1px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #000000;
margin:0 0 4px;
width: 25px;
height: 5px;
}
@media (max-width: 768px) {
.img-responsive{
width: 300px;
height:50px;
padding-left:50px;
}
}
@media (max-width: 376px) {
.img-responsive{
width: 220px;
height:50px;
padding-left: 20px;
}
}
@media (max-width: 286px) {
.img-responsive{
width: 180px;
height:50px;
padding-left: 5px;
}
}
.nav.navbar-nav > li{
display: :inline-block;
}
.nav.navbar-nav{
list-style-type:none;
}
.nav.navbar-nav > li > a:hover{
color:#a92419;
border-bottom-color: #a92419;
}
.navbar-default .navbar-toggle .icon-bar {
background-color:#a92419 ;
margin:0 0 4px;
width: 25px;
height: 5px;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background: none;
}
button.navbar-toggle{
background:none;
border:none;
color:#000;
}
footer {
color:#fff;
position:absolute;
bottom:0;
width:100%;
height:10px
}
footer h4,p {
margin-bottom: 20px;
font-family: Oswald;
text-align:justify;
}
footer .footer-above {
padding-top: 80px;
background-color: #a92419 ;
}
footer .footer-col {
margin-bottom: 50px;
margin-right: 100px;
}
footer .footer-below {
padding: 25px 0;
background-color: #fff;
color:#949494;;
}