在橫向設備上正確顯示內容

我已經使用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 -->

來源

2016-07-05 pocockn

您必須添加overflow：auto更改.intro頭& .intro頭-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; 
}

來源

2016-07-05 08:38:40

在橫向設備上正確顯示內容

回答

相關問題