如何強制div使用引導程序底部

我在Codepen.io上使用引導程序。我有一個頁面分爲3個主要的divs。中間的div有3張圖片，分爲3列。如何強制div使用引導程序底部

在桌面上一切看起來不錯，但一旦我調整窗口大小，底部div重疊第三個圖像，而不是移動到底部。

有沒有辦法讓引導程序工作的魔術，而無需手動更改CSS？

https://codepen.io/oldmanwithbeer/pen/ENzvoY?editors=1000#0

<div class="container-fluid"> 
    <div class="row"> 
    <div id="one" class="col-md-12"> 

     <div id="btn_row" class="row"> 
     <div class="col-md-12 text-center"> 
      <button type="button" class="btn btn-primary">some text</button> 
      <button type="button" class="btn btn-primary">some text</button> 
      <button type="button" class="btn btn-primary">some text</button> 
      <button type="button" class="btn btn-primary">some text</button> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div id="two" class="col-md-12"> 
     <h2>some text</h2> 
     <div class="row"> 
     <div class="col-md-4"> 
      <div class="thumbnail"> 
      <a href="#" target="_blank"> 
       <img class="img-responsive" src="#" alt="text"></a> 
      <div class="caption">some text</div> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="thumbnail"> 
      <a href="#" target="_blank"> 
       <img class="img-responsive" src="#" alt="text"></a> 
      <div class="caption">some text</div> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="thumbnail"> 
      <a href="#" target="_blank"> 
       <img class="img-responsive" src="#" alt="text"></a> 
      <div class="caption">some text</div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div id="three" class="col-md-12"><h3>text</h3> 
    </div> 
    </div> 
</div>

來源

2016-12-24 KarmaKing

您發佈不顯示你所遇到的問題的例子，張貼演示了問題，或者鏈接到您的CodePen工作的例子。 – vanburen

謝謝，添加鏈接 – KarmaKing

您有* id =「portfolio」*（這是一個列）設置爲400px的高度，在移動設備上，您無法將所有嵌入其中的三列填入400px。刪除高度，你會看到不同之處。 – vanburen

實際上是適當的響應或移動視圖開發人員使用CSS媒體查詢。如果你看bootstrap doc，那麼你可能會看到演示。重要的是你使用固定高度不同的元素，比如：

#portfolio { 
    height: 400px; 
}

所以我的建議是，在你的樣式或風格的底部，使用CSS媒體查詢與自動高度。就像這樣：

@media only screen and (max-width: 767px) { 
    #portfolio { 
     height: auto; 
    } 
}

希望它會做的魔力......

來源

2016-12-24 22:04:17

媒體查詢將不得不等待（仍然是noob），但高度：自動修復它，謝謝！ – KarmaKing

如何強制div使用引導程序底部

回答

相關問題