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内のコードのFloat:right行を使用する必要が私の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;;
}