html - Bootstrap - 网格系统 - 修复了高度问题

Question

我使用 Bootstrap 网格系统作为布局来构建 Web 应用程序。到目前为止，一切都很好，但遇到了这个问题，我有一个 div 行有一个大图像(宽度 1280px x 高度 150px)，当你调整页面大小时图像重叠在 div 上。

为了解决这个问题，我在我的 div 上放置了一个固定高度(高度 150 像素)，它停止调整大小和重叠，但我引入了一个新问题。现在这会破坏我的布局并添加一个垂直滚动条，我需要我的网络应用程序只适合整个页面。

我正在考虑添加一个 overflow: hidden 到我的 CSS，但对我来说似乎有点老套。只是在寻求建议，也许还有一种不同的布局方法。似乎 Bootstrap dosen 与固定高度配合得很好。

https://jsfiddle.net/DTcHh/9847/

<div class="container-fluid row-fluid" style="height: 100%;">
    <div class="row grey" style="height: 10%;"> title of the website here </div>
    <div class="row yellow" style="height: 150px; text-align: center;"> 
        <img width="1280px" height="150px" src="https://41.media.tumblr.com/tumblr_m4n498M3NQ1r9f8g8o1_1280.png" />
    </div>
    <div class="row grey" style="height: 60%;"> main content area </div>
    <div class="row grey" style="height: 10%;"> footer area </div>
</div>

Answer 1

您使用 Bootstrap 的方式不正确。您没有正确操作 Bootstrap 网格系统。您已将图像排成一行，但没有放在一列中。你知道你应该至少有一行(例如 col-md-12)。然后 Bootstrap 将完美地考虑您的图像或内容。重构您的代码并按照 Bootstrap 告诉您的方式进行操作。此外，您可以使用 Bootstrap 的 img-responsive 类使图像响应。看这里:http://getbootstrap.com/css/#images-responsive