最小高度干扰响应图像

时间:2014-09-24 01:10:54

标签: css responsive-design twitter-bootstrap-3

我正在根据引导程序模板构建启动页面。我的代码运行正常,直到我将其输入我的CMS,此时图像将不再显示。我的解决方案是在站点包装器(包含css中的图像)中添加一个最小高度,这部分解决了问题,但创建了另一个。虽然我可以根据分配给最小高度的值看到图像,但图像本身不再响应。那么,基本上,是否有一种响应友好的方式来设置最小高度,以便图像将响应所有设备显示?相关代码如下,谢谢。

<style type="text/css">

.masthead-nav > li > a {
  color: white;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
  border-bottom-color: white;
}


.site-wrapper {
  background-image: url("http://2.bp.blogspot.com/-vUwP1dwP3Pg/TaevaR3g37I/AAAAAAAAADw/v1oIwQjeMGc/s1600/ASUblack.jpg");
  background-size: cover;
  background-position: center;
  min-height: 930px;
}

@media (min-width: 992px) {
  .masthead, .mastfoot, .cover-container {
    width: 100%;
  }
}
</style>


<div class="site-wrapper">

  <div class="site-wrapper-inner">

    <div class="cover-container">

      <div class="masthead clearfix hidden-xs">
        <div class="inner">
          <h3 class="masthead-brand">Text</h3>
          <ul class="nav masthead-nav">
            <li><a href="#" target="_blank">X</a></li>
            <li><a href="#">Y</a></li>
            <li><a href="#">Z</a></li>
          </ul>
        </div>
      </div>

    </div>

  </div>

</div>

1 个答案:

答案 0 :(得分:1)

不确定。你的问题是许多人使用Bootstrap的问题:过于复杂的事情非常简单,默认情况下已经被Bootstrap处理了

按原样保留HTML标记并清除不需要的东西的CSS代码:

body {
    height:100vh;
    background: url("http://2.bp.blogspot.com/-vUwP1dwP3Pg/TaevaR3g37I/AAAAAAAAADw/v1oIwQjeMGc/s1600/ASUblack.jpg") no-repeat 50%;
    background-size: cover;
}
.masthead-nav > li > a {
    color: white;
}
.masthead-nav > li > a:hover, .masthead-nav > li > a:focus {
    border-bottom-color: white;
}

我不知道你是否需要那些masthead-nav属性,所以添加它们以防万一,但你当然不需要你拥有的其他东西。缩短说明:如果您想要身体的背景,请将其添加到...... body。简单易行,请参阅Bootply