Как оперировать шириной .navbar-brand в Bootstrap?

346

24 января 2017, 21:41

Есть такой навбар, сайдбар и контент:

.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

Как оперировать шириной .navbar-brand — чтобы она соотвествовала .col-md-2?

Мне нужно, что пункты навбара начинались на одном уровне с контентом, то есть чтобы правая граница .navbar-brand и .sidebar-box совпадали (при md и lg, так как в случае xs и md сайдбар скрывается).

Я имею в виду средствами Bootstrap.

Answer 1

Решил проблему, добавив следующее в свой файл стилей:

.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>