Bootstrap col-md变大是因为div在里面的绝对位置

Question

我对导航中徽标图像的绝对定位有疑问。

我的徽标必须一半在导航栏上，一半在下方。

当我在 col-md-3 中添加一个 class 并且 te 属性 position: absolute 时，父 col-md-3 的大小变得比正常大 col-md-3.

它应该是这样的：

为了更好地定位内容，我将导航和徽标拉成一行和两列（col-md-2 和 col-md-10）。第一行下方的内容是包含两个列的一行 - col-md-offset-2 col-md-7 和 col-md-3。两行的列必须具有相同的 witdh。

代码： http://www.bootply.com/VJYSA55MEt

我的问题是为什么徽标 col-md-3 比第二行的 col-md-3 大。两个列必须具有相同的宽度...我不知道如何确定宽度...

或者您有更好的方法来处理这个问题（主要是，徽标位于导航栏下方，导航栏下方的内容从徽标开始）

Answer 1

无需在 Absolute 中使用 col-md div。在 logo 中使用 Absolute，在 Nav 中使用 Relative 然后给出一些 Top 值，它会下降。喜欢

.logo{
  position:absolute;
  top:20px;
}
.nav{
  position:relative;
}

Answer 2

我更喜欢使用 default layout。如果增加徽标的高度，它就会从导航栏中出来。这是它的特点。通常这会成为一个问题。但现在这就是解决您的任务的方法。

请检查结果。

http://www.bootply.com/u2QhCYtrQ3

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:focus, 
.navbar-default .navbar-nav > .active > a:hover {
  background-color: #000;
  color: #fff;
}
.navbar {
  margin-bottom: 0;
}
.navbar-brand {
  padding: 0 15px;
}
@media (min-width: 992px) {
  .navbar > .container {
    padding: 0;
  }
  .navbar-brand {
    margin-left: 0 !important;
  }
  .navbar-header {
    margin-right: 15px !important;
    width: 16.66666667%; /* width of .col-md-2 */
  }
  .navbar-header img {
    height: auto;
    max-width: 100%;
  }
}

section .row { margin-bottom: 50px; }
section .row > div > div { height: 50px; }
.green  { background: green;  }
.blue   { background: blue;   }
.red    { background: red;    }
.silver { background: silver; }

<header class="header-main">
  <nav class="navbar navbar-default navbar-static-top nav-izbornik"   role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#" title="Test centar">  
          <img src="//dummyimage.com/225x200/000/fff" alt="" class="hidden-xs hidden-sm logo-borderi">
          <img src="//dummyimage.com/50x50/000/fff" alt="" class="hidden-md hidden-lg logo-za-manje">
        </a>        
      </div><!--.navbar-header-->    
    
      <div class="collapse navbar-collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Item 01</a></li>
          <li><a href="#">Item 02</a></li>
          <li><a href="#">Item 03</a></li>
          <li><a href="#">Item 04</a></li>
          <li><a href="#">Item 05</a></li>
          <li><a href="#">Item 06</a></li>
        </ul>      
      </div><!--nav-collapse -->    
    </div><!--container-->
  </nav>  
</header>

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-offset-2 col-md-7"><div class="red"></div></div>
      <div class="col-md-3"><div class="blue"></div></div>
    </div>
    <div class="row">
      <div class="col-md-2"><div class="silver"></div></div>
      <div class="col-md-10"><div class="green"></div></div>
    </div>
  </div><!--container-->
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Bootstrap col-md变大是因为div在里面的绝对位置

Bootstrap col-md becomes larger because of absolute position of div inside

html

css

css-position

navbar

twitter-bootstrap