如何讓div在bootstrap中展開而不是使用滾動條？

我正在使用Bootstrap並正在使用類col-md-6。在左欄中我有一個圖像，在右欄中有兩段文字。當我縮小網頁瀏覽器（或使用移動設備）時，我想讓div展開，而不是使用滾動條。現在發生的事情是圖像顯示正常，但我必須使用滾動條來查看文本的段落。如何讓div在bootstrap中展開而不是使用滾動條？

對不起，我是一個新的網絡編程，花了大量的時間試圖找出我做錯了什麼。不確定它是否相關，但我還包括問題後的下一個代碼塊。

我希望它從pg4滾動到pg5，但我不希望額外的滾動條必須查看pg4中的所有內容。

編輯：也覺得我應該注意到，我已經看到類似的問題張貼在這裏，並已嘗試了許多這些問題的答案，並沒有任何工作。

<div id="pg4"> 
    <div class="container"> 
    <h1 class="text-center text-uppercase">About Me</h1><hr/> 
    <div class="row"> 
     <div class="col-md-6"> 
     <img src="IMAGE" class="center-block img-responsive" id="picture" alt="Picture" /> 
     </div> 
     <div class="col-md-6"> 
     <p>PARAGRAPH 1</p> 
     <p>PARAGRAPH 2</p> 
     </div> 
    </div> 
    </div> 
</div> 

<div id="pg5"> 
</div> 

/* PG 4 */ 
#pg4 { 
    background-color: #282E34; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    display: block; 
    top: 250%; 
    overflow: auto; 
} 

#pg4 p { 
    color: white; 
    text-align: left; 
    font-size: 20px; 
    margin-left: 3%; 
    margin-right: 5%; 
    margin-bottom: 10%; 
    color: #6c6d6e; 
} 

#p1 { 
    margin-top: 15%; 
} 

#picture { 
    width: 45%; 
    margin-top: 15%; 
} 

/* PG 5 */ 
#pg5 { 
    background-image: url("IMAGE"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 350%; 
    overflow: auto; 
}

來源

2017-04-25 Steve

從'pg4'和'pg5'刪除'height：100％'。 –

嘗試添加更多的類到您的div

<div class="row"> 
    <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6"> 
    <img src="IMAGE" class="center-block img-responsive" id="picture" alt="Picture" /> 
    </div> 
    <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6"> 
    <p>PARAGRAPH 1</p> 
    <p>PARAGRAPH 2</p> 
    </div> 
</div>

這樣的事情。

如果默認情況下未指定col-xs-? bootstrap堆疊您的div，它的行爲與col-xs-12類似。大顯示器也是如此。所以，你需要指定一個寬度的超小型和大型顯示器

，並從該部分：width: 45%您已經定義img-responsive

來源

2017-04-25 20:16:09 SouXin

當你爲一個元素設置height和overflow: auto

#picture { 
width: 45%; 
margin-top: 15%; 
}

取出，很意味着你想讓這個元素可以滾動。如果你不想要這個，而不是height: 100%集合height: auto;

來源

2017-04-25 20:28:58

如何讓div在bootstrap中展開而不是使用滾動條？

回答

相關問題