I'm new to Bootstrap , I'm trying to write a simple web page contains a navigation , side navigation ..
I need the "triMago" Branch image to be in the center of the navigation bar
but it doesn't work on common solution like margin : auto;
I'm new to the StackOverFlow as well , Tell me if something I did wrong , thanks.
my code :
<body>
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="130">
<div class="container-fluid">
<div class="navbar-header" >
<a class="navbar-brand" href="#" id="logo">
<img src="http://ift.tt/2nyP0Nq" alt="logo" >
</a>
</div>
<nav class="nav nav-pills" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#" id="homepage" class="navButton"> Home</a></li>
<li><a href="#" id="about" class="navButton"> About us</a></li>
</ul>
</nav>
</div>
</nav>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-10 text-left">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr>
<h3>Test</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>WaterBall © MingChang Homework-Purpose</p>
</footer>
my css :
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
height: 130px;
background-color: #FFF;
border-bottom: 3px solid gray;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {
height: 70%;
}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
.affix {
top: 0;
width: 100%;
}
#logo{
margin: auto;
}
Aucun commentaire:
Enregistrer un commentaire