Question

我使用Bootstrap创建了一个启动页面，在不同的显示器上，它看起来像预期的那样，并且向下和向下缩放。

但是，如果保持窗口高度较小并扩大宽度，则看起来并不像我想要的那样，在横向移动设备上查看时也是如此。

我有2个部分应该垂直显示50％的屏幕，但是在横向上它不会减小尺寸并重叠，是否有办法阻止它？

这是我的代码

body,
html {
  width: 100%;
  height: 100%;
}

.vcenter {
  display: inline-block;
  vertical-align: middle;
  float: none;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 700;
}

.topnav {
  font-size: 14px; 
}

.lead {
  font-size: 18px;
  font-weight: 400;
}

.intro-header-two {
  text-align: center;
  color: #f8f8f8;
  background: url(../img/headerOne.jpg) no-repeat center center;
  background-size: cover;
  height:50%;
}

.intro-header {
  text-align: center;
  color: #f8f8f8;
  background: url(../img/headerTwo.jpg) no-repeat center center;
  background-size: cover;
  height:50%;
}


.intro-message {
  position: relative;

}

.btn-av {
  padding:10px 20px;
  color:#fff;
  border: 2px solid #fff;
  background:none;
  border-radius:4px;
  margin-bottom:15px;
}

a .btn-av:hover {
  background: #E9E9E9;
  color:#000;
}

<link href='https://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- First Header Image -->
<div class="intro-header">
  <div class="container">

    <div class="row">
      <div class="col-lg-12">
        <div class="intro-message" style="margin-top: 60px;">
          <img src="img/AVLOGO.png" class="img-responsive" style="margin: 0 auto; width:65%;">
          <h4 style="margin-bottom: 25px;">Bringing technology into design</h4>
          <a href="av.communitec.co"><button class="btn-av">Enter Site</button></a>
        </div>
      </div>
    </div>
  </div>
  <!-- /.container -->
</div>
<!-- /.intro-header -->

<!-- First Header Image -->
<div class="intro-header-two">
  <div class="container">

    <div class="row">
      <div class="col-lg-12">
        <div class="intro-message"style="margin-top: 60px;">
          <img src="img/ITLOGO.png" class="img-responsive" style="margin: 0 auto; width:65%;">
          <h4 style="margin-bottom: 25px;">Technology solutions for home and business</h4>               
          <a href="http://communitec.co/it/"><button class="btn-av">Enter Site</button></a>
        </div>
      </div>
    </div>
  </div>
  <!-- /.container -->
</div>
<!-- /.intro-header -->

Answer 1

你必须添加overflow：auto到.intro-header＆amp; .intro-header-2：

.intro-header {
   padding-top: 50px;
   padding-bottom: 50px;
   text-align: center;
   color: #f8f8f8;
   background: url(../img/headerTwo.jpg) no-repeat center center;
   background-size: cover;
   height: 50%;
   float: left;
   width: 100%;
   overflow: auto;
}

.intro-header-two {
   padding-top: 50px;
   padding-bottom: 50px;
   text-align: center;
   color: #f8f8f8;
   background: url(../img/headerOne.jpg) no-repeat center center;
   background-size: cover;
   height: 50%;
   float: left;
   width: 100%;
   overflow: auto;
}

在横向设备上正确显示内容

1 个答案: