Question

我正在使用bootstrap等添加徽标和背景图片。我不确定我是否正确这样做但是当我调整窗口大小时，导航栏自身变小但导航栏中的图像不是。谁知道为什么？

HTML：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="logo">
        <img src="Image/Logo.png"/>
      </div>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a></li>       
        <li><a href="#about">About</a></li>
        <li><a href="#about">Login</a></li>
        <li><a href="#about">Become A member</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

CSS：

body { 
    background: url('../Image/BackgroundImage.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.navbar-default {
    background-color: rgba(0, 0, 0, 0.65);
    border-top: 0px solid rgba(0, 0, 0, 0.5);
    border-bottom: 0px solid rgba(0, 0, 0, 0.5);
    margin-top: 60px;
    height: 80px;
}

.navbar-default .navbar-nav > li > a {
    color: #FFFFFF;
    font: normal normal normal 12px/1.3em 'Open Sans',sans-serif;
    text-transform: uppercase;
     padding:28px;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{
    color: #ffcb80;
    background-color: transparent;
}

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus {
    color: #ffcb80;
    background-color: transparent;
}

.logo {
    margin-left: 4em;
}

所以我的logo div目前还没有重新调整大小。另外我对我的背景图片有疑问，通常他们不需要调整大小？我的只是削减，你只看到它的一点，那是好的等？还是编码不好？

Answer 1

要在Bootstrap Framework中激活图像，您需要在图像标记中添加一个类：

类=＆＃34; IMG响应＆＃34;

有关详细信息，请参阅bootstraps文档：

http://getbootstrap.com/css/#images

示例：

<img src="Image/Logo.png" class="img-responsive" />

Bootstrap图像无响应

1 个答案: