Bootstrap - 网格系统 - 固定高度问题答案

【问题标题】：Bootstrap - Grid system - Fixed height issuesBootstrap - 网格系统 - 固定高度问题
【发布时间】：2015-07-12 02:54:24
【问题描述】：

我使用 Bootstrap 网格系统作为我的布局来构建一个 Web 应用程序。到目前为止，一切都很好，但遇到了这个问题，我有一个 div 行，其中有一个大图像（宽度 1280 像素 x 高度 150 像素），并且当您调整页面大小时，图像与 div 重叠。

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

我正在考虑可能添加一个溢出：隐藏到我的 CSS，但对我来说似乎有点 hacky。只是寻找建议，也许是我的布局的不同方法。似乎 Bootstrap 在固定高度下玩得很好。

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>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

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

【讨论】：

谢谢伙计，它现在开始变得很有意义了，我的每一行都缺少一列。事情现在开始适应了。非常感谢。
不客气。不要忘记投票给我的答案。祝你好运（y）

【解决方案2】：

我认为您正在寻找的是这个。这基本上适用于 max-width: 100%;高度：自动；和 display: block; 到图像，以便它很好地缩放到父元素。

    <img src="..." class="img-responsive" alt="Responsive image">

您可以在http://getbootstrap.com/css/#images-responsive阅读更多内容

示例：https://jsfiddle.net/qxLtmhat/

【讨论】：

【解决方案3】：

首先你知道你应该有至少一列（例如 col-md-12 在一行中） - 查看 Imran 的第一个答案，然后你硬编码宽度和高度 - 删除它们并添加 img-responsive 类图像。

【讨论】：