There is such a navbar, sidebar and content:

.navbar-brand, .sidebar-box { border-right: 1px solid red; } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Lorem Ipsum</a> </div> <div id="collapse" class="collapse navbar-collapse"> <ul class="navbar-nav nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> </nav> <div class="container-fluid"> <div class="row"> <div class="col-md-2 hidden-xs hidden-sm sidebar-box">Sidebar Box</div> <div class="col-md-10">Content Box</div> </div> </div>

http://codepen.io/anon/pen/dNWZJX

How to operate .navbar-brand width - so that it meets the .col-md-2 ?

I need that the items on the navbar begin on the same level as the content, that is, the right border of the .navbar-brand and .sidebar-box match (with md and lg , as in the case of xs and md sidebar is hidden).

Bootstrap - .navbar-brand width

I mean by means of Bootstrap.

    1 answer 1

    Solved the problem by adding the following to your style file:

     .navbar-header { min-width: 16%; } 

     .navbar-brand, .sidebar-box { border-right: 1px solid red; } .navbar-header { min-width: 16%; } 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Lorem Ipsum</a> </div> <div id="collapse" class="collapse navbar-collapse"> <ul class="navbar-nav nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> </nav> <div class="container-fluid"> <div class="row"> <div class="col-md-2 hidden-xs hidden-sm sidebar-box">Sidebar Box</div> <div class="col-md-10">Content Box</div> </div> </div>

    http://codepen.io/anon/pen/GrmGmK