如何在調整引導程序div瀏覽器大小時去掉空格？

當我將瀏覽器調整爲手機尺寸時，我在兩個div的[Searcharea div和Steps div]之間產生了很大的差距。但是，在pc模式下，沒有差距。我嘗試了保證金頂部和底部，但我無法弄清楚錯誤。請幫忙。謝謝。以下是代碼。如何在調整引導程序div瀏覽器大小時去掉空格？

HTML代碼：

<div class="searcharea col-md-12"> 

      <div class="head col-md-12 col-xs-12"> 
       <h1> Search for your own seat. </h2> 
      </div> 

      <div class="col-md-12 col-xs-12"> 
       <div class="input-group custom-search-input"> 
        <input type="text" class="form-control"> 
        <span class="input-group-btn"> 
        <button class="btn btn-danger" type="button"> 
        <span class="glyphicon glyphicon-search"></span> CLICK 
       </button> 
       </span> 
       </div><!-- /input-group --> 
      </div> 

    </div>  <!-- Search Bar ENDs --> 

    <div class="steps col-md-12 col-xs-12"> 
     <div class="find col-md-12"> 
      <h2 class="findhead">Finding Nearby ! </h2> 
     </div> 
    </div>

CSS：

.searcharea{ 
background-image: url(restback.jpg); 
background-repeat: no-repeat; 
background-size: 100%; 
height: 600px; 
margin-top: 0px; 
} 

.custom-search-input { 
    margin:5%; 
    width: 60%; 
    margin-left: 20%; 

} 
.head{ 
color: #ffffff; 
margin-top: 15%; 

text-align: center; 
} 
.steps { 
background-color: lightblue; 
height: 700px; 
margin-top: 0px; 
} 
.find{ 
text-align: center; 
}

來源

2015-06-09 Voodoo

這是我不太清楚這部分你都不滿意。這裏是你的[code]（http://www.bootply.com/2fVnUTd7Iy），查看全屏和移動預覽。 –

@DejaVu嘿。我繼續你的鏈接。因此，一旦您打開代碼播放和檢查代碼，您會注意到當您將瀏覽器大小縮小爲移動大小時，searchbar div和steps div之間的距離會增加。你可以添加一個背景顏色到searchbar div並檢查。請幫助，如果你能擺脫這個空間。非常感謝。 – Voodoo

由於您的'searcharea'和'steps'都具有固定的高度，因此它必須增加。從你的「searcharea」中刪除'height：600px;'看看會發生什麼。 –

問題是與你的固定高度，即高度：600px的;

/* CSS used here will be applied after bootstrap.css */ 

.searcharea { 
    background-image: url('http://placehold.it/1200x600'); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; // Add 
    min-height: 300px; // Add 
} 
.custom-search-input { 
    margin: 0 auto; // Replaced 
    width: 60%; 
    padding-bottom: 5%; // Add 
} 
.head { 
    color: #ffffff; 
    margin-top: 15%; 
    text-align: center; 
} 
.steps { 
    background-color: lightblue; 
    height: 700px; 
    margin-top: 0px; 
} 
.find { 
    text-align: center; 
}

<div class="searcharea col-md-12"> 

    <div class="head col-md-12 col-xs-12"> 
    <h1> Search for your own seat. </h1> 
    </div> 

    <div class="col-md-12 col-xs-12"> 
    <div class="input-group custom-search-input"> 
     <input class="form-control" type="text"> 
     <span class="input-group-btn"> 
        <button class="btn btn-danger" type="button"> 
        <span class="glyphicon glyphicon-search"></span> CLICK 
     </button> 
     </span> 
    </div> 
    <!-- /input-group --> 
    </div> 

</div> 
<!-- Search Bar ENDs --> 

<div class="steps col-md-12 col-xs-12"> 
    <div class="find col-md-12"> 
    <h2 class="findhead">Finding Nearby ! </h2> 
    </div> 
</div>

Bootply

來源

2015-06-09 17:39:44

謝謝你manoj。只有在背景尺寸上使用額外的100％才能起作用。 – Voodoo

太棒了！很高興幫助:) –

如何在調整引導程序div瀏覽器大小時去掉空格？

回答

相關問題