How to get page-header and nav-pills to appear on the same line
Question
I would like to have the header of my web page to be centered in the screen. The heading called 'Yawning Yeti' should be at the center, and the nav-pills should be to the right of that. Although I am able to get the nav-pills to the right, they appear to be one line below 'Yawning Yeti'.
You can see the page here: http://jsbin.com/cazokija/1/
I tried the suggestion given here but that didn't affect the html in any visible manner. Here is my CSS:
.page-header{
width: 70%;
margin: 0 auto;
float: none;
}
.page-header > h1 {
display: inline-block;
}
And here is my html:
<html>
<body>
<div class="page-header">
<div class="text-center">
<h1>Yawning Yeti</h1>
</div>
<div class="center-pills">
<ul class="nav nav-pills pull-right">
<li class="active">
<a href="#">bigfoot <span class="badge">+42</span></a>
</li>
<li>
<a href="#">nessie <span class="badge">3</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
How would I make it so the nav-pills are to the right of 'Yawning Yeti', on the same line, and occupying 70% of the screen at the center?
1 answers
solution1
2 ACCPTED 2014-04-25 18:58:55
Basically when you have pull-left or pull-right components, they should appear before other "non-pull" components.
In your case, you would need to put <ul class="nav nav-pills pull-right"> before <div class="text-center"> like this: http://jsbin.com/cazokija/31
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.