All geek questions in one place

(bootstrap) How to align navigation on the same line as the title (logo)

This is what I have so far: (using download)

 <body>
    <div class="container">
        <div class="page-header">
            <h1>Title <small>Secondary Text</small></h1>
            <ul class="nav nav-pills navbar-right">
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="register.html">Register</a></li>
                <li><a href="login.html">Login</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
    </div>
</body>

The page title creates a horizontal line, and I want the navigation menu above this line to align to the right and the title to the left. For some reason, it continues to go below the horizontal line.

I tried using a container-liquid div, but the name bounces and doesn't stop on a horizontal line at this point.

All help is appreciated. Thank.

+4
source share
2 answers

You can use display: flex;on .page-headerto arrange items next to each other.

flex: 1; h1 .nav (50%). , . , . -.

.page-header {
  display: flex;
}

h1,
.nav {
  flex: 1;
  vertical-align: top;
  margin-top: 0 !important;
}

.nav {
  text-align: right;
}

.nav.nav-pills>li {
  float: none;
  display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="page-header">
    <h1>Title <small>Secondary Text</small></h1>
    <ul class="nav nav-pills">
      <li class="active"><a href="index.html">Home</a></li>
      <li><a href="register.html">Register</a></li>
      <li><a href="login.html">Login</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</div>
Hide result
+3

. . . div , , h1 ul.

- ul . , . - , , . h1 div pull-left.

.

<body>
  <div class="page-header">
    <div class="container">
        <div class="pull-left">
                <h1>Title <small>Secondary Text</small></h1>
        </div>
        <ul class="nav navbar-nav pull-right">
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="register.html">Register</a></li>
            <li><a href="login.html">Login</a></li>
            <li><a href="#">Contact Us</a></li>

            </ul>
        </div>
    </div>
</body>
+3

Source: https://habr.com/ru/post/1672981/

More articles:


All Articles