Question

我已经在bootstrap的导航栏中添加了一个图像，但它完全脱节了。我希望它集中在左边，我做错了什么？

HTML 代码为：

<nav class = 'navbar navbar-default'>
  <div class = 'navbar-header'>
    <button type = 'button' class = 'navbar-toggle collapsed' data-toggle = 'collapse' data-target = '#example-navbar-collapse'>
      <span class = 'sr-only'>Toggle navigation</span>
      <span class='icon-bar top-bar'></span>
      <span class='icon-bar middle-bar'></span>
      <span class='icon-bar bottom-bar'></span></button>
    <a class = 'navbar-brand' href = '#'><img class='img-responsive2'       
      src='http://www.biophysics.org/portals/57/Images/newstar.png'></a>
  </div>
  <div class = 'collapse navbar-collapse' id = 'example-navbar-collapse'>
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>About</a></li>
    </ul>  
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>Get bids</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>Register company</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>Help</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>Contact</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-right'>
      <li><a href='#'><span class='glyphicon glyphicon-user'></span> Login</a></li>
    </ul>
  </div>
</nav>

我的 CSS 是：

.navbar-default {   
    padding-left:10px;
    padding-right:10px;
    border: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background-color: #00a3fe;
    font-size: 14pt;font-weight: 400;}


.nav.navbar-nav.navbar-right li a {
    color: #ffffff;
}

.nav.navbar-nav.navbar-nav li a {
    color: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #49bdfe;
    color: #FFFFFF;
}

.navbar-toggle, .icon-bar {
    border:1px solid white;
    background-color:white;
}

谢谢你提前提供任何帮助。

Answer 1

通过在css中添加这些行，可以解决问题：

//added css
.navbar-brand {
  padding:0 !important;
}


.img-responsive2 {
  position: relative;
  height: 100%;
}

这是一个BootPly

/* CSS used here will be applied after bootstrap.css */
.navbar-default {   
    padding-left:10px;
    padding-right:10px;
    border: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background-color: #00a3fe !important;
    font-size: 14pt;font-weight: 400;
}


.nav.navbar-nav.navbar-right li a {
    color: #ffffff;
}

.nav.navbar-nav.navbar-nav li a {
    color: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #49bdfe;
    color: #FFFFFF;
}

.navbar-toggle, .icon-bar {
    border:1px solid white;
    background-color:white;
}

//added css
.navbar-brand {
  padding: 0 ;
}


.img-responsive2 {
  position: relative;
  height: 100%;
  margin: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class = 'navbar navbar-default'>
  <div class = 'navbar-header'>
    <button type = 'button' class = 'navbar-toggle collapsed' data-toggle = 'collapse' data-target = '#example-navbar-collapse'>
      <span class = 'sr-only'>Toggle navigation</span>
      <span class='icon-bar top-bar'></span>
      <span class='icon-bar middle-bar'></span>
      <span class='icon-bar bottom-bar'></span></button>
    <a class ='navbar-brand'  style='padding:0 !important' href = '#'><img class='img-responsive2'       
      src='http://cheekytransport.co.uk/images/logo-new.png'></a>
  </div>
  <div class = 'collapse navbar-collapse' id = 'example-navbar-collapse'>
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>About</a></li>
    </ul>  
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>Get bids</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>Register company</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>Help</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>Contact</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-right'>
      <li><a href='#'><span class='glyphicon glyphicon-user'></span> Login</a></li>
    </ul>
  </div>
</nav>

Answer 2

像这样设置图像的宽度和高度

.img-responsive2 
    {
    width: auto;
    height: 35px;
    }

Answer 3

您需要像这样设置图像的高度

.img-responsive2 {
    height: 20px;
}

非常简单的示例http://bootsbin.com/bin/view/44/

导航栏中的中心图像

3 个答案: