中行高度適合twitter-bootstrap網格系統

Question

我是shohel rana。 自很多天以來，我一直面臨一個問題。 我沒有找到解決我問題的方法。

問題是：

我有三排。 第一行的高度將根據其內容的高度進行調整，而第三行的高度將根據其內容的高度進行調整。 但是第二行將根據其余高度進行調整。

這是我的問題，如下圖所示：

在此處輸入圖片說明

但是我需要下面的結果：

在此處輸入圖片說明

這是苦行僧

HTML：

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
  <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row row-1">
      <div class="col-md-4">ROW1 COLUMN1</div>
      <div class="col-md-4">ROW1 COLUMN2</div>
      <div class="col-md-4">Lorem ipsum dolor sit amet

Consectetur adipiscinging elite Integer molestie lorem at massa Facilisis in prestium nisl aliquet Nulla volutpat aliquam velit Phasellus iaculis neque Purus sodales ultricies Vestibulum laoreet porttitor sem Ac tristique libero volutpat ROW3在Faucibus porta laROW1 COLUMN2 Lorem ipsum dolor sitmet consectetur adipiscing elite Integer molestie lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit Phasellus iaculis neque Purus sodales ultricies Vestibulum laoreet肖像菜LOREM

</html>

CSS：

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}
.container-fluid {
  background-color: gray;
  height: 100%;
}
.row-1 {
  background-color: #b200ff;
  margin-bottom: 5px;
}
.row-1 > .col-md-4 {
  background-color: #0094ff;
  border: 1px dashed #111010;
  text-align: center;
}
.row-2 {
  background-color: #b6ff00;
  margin-bottom: 5px;
}
.row-2 > .col-md-12 {
  background-color: #ff6a00;
  border: 1px dashed #111010;
  text-align: center;
}
.row-3 {
  background-color: #00ff21;
}
.row-3 > .col-md-4 {
  background-color: #00ffff;
  border: 1px dashed #111010;
  text-align: center;
}

預防：

避免顯示：表格，表格行和表格單元格。
避免使用JavaScript代碼。

Answer 1

對於您的問題，有一個通用的解決方案是使用spacer元件（例如div）。 要集成此元素，您必須稍微更改標記。

標記：

<div class="container-fluid first-container">
    <div class="row row-1">
        <div class="col-md-4">ROW1 COLUMN1</div>
        <div class="col-md-4">ROW1 COLUMN2</div>
        <div class="col-md-4">ROW1 COLUMN3</div>
    </div>
</div>

<div class="container-fluid full-height-container">
    <div class="row row-2">
        <div class="col-md-12">
            ROW2 COLUMN1
        </div>
        <div class="spacer"></div>
    </div>

</div>

<div class="container-fluid last-container">
    <div class="row row-3">
        <div class="col-md-4">ROW3 COLUMN1</div>
        <div class="col-md-4">ROW3 COLUMN2</div>
        <div class="col-md-4">ROW3 COLUMN3</div>
    </div>
</div>

如您所見，我將所有重要的行包裝在單獨的容器中，並在全高容器中插入了spacerelement。 該div必須與最后一行具有相同的高度，以防止內容被放置在最后一行的后面。

CSS：

    html,
    body {
        height: 100%;
        min-height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .container-fluid {
        background-color: gray;
    }

    .row-1 {
        background-color: #b200ff;
    }

    .first-container {
        position: absolute;
        width: 100%;
        z-index: 1;
    }

    .full-height-container {
        height: 100%;
        padding-top: 25px; /*height of the first row*/
    }

    .spacer {
        height: 22px;
        position: absolute;
        bottom: 0;
    }

    .last-container {
        margin-top: -22px;
    }

    .row-1 > .col-md-4 {
        background-color: #0094ff;
        border: 1px dashed #111010;
        text-align: center;
    }

    .row-2 {
        background-color: #b6ff00;
        height: 100%;
    }

        .row-2 > .col-md-12 {
            background-color: #ff6a00;
            border: 1px dashed #111010;
            height: 100%;
            text-align: center;
        }

    .row-3 {
        background-color: #00ff21;
    }

        .row-3 > .col-md-4 {
            background-color: #00ffff;
            border: 1px dashed #111010;
            text-align: center;
        }

在這里，您可以看到我添加了其他CSS類。 a）為了更好的可讀性，b）您應該避免覆蓋本機引導css類，因為這會在項目擴展時給您帶來很多麻煩。

重要的是，將高度（100％）通過DOM元素傳遞到第二row-2否則高度將不會被設置。

還要注意，現在第一行位於絕對位置。 這意味着它將溢出第二行。 為避免這種情況，您必須將padding-top設置為full-height-content區域。

這是一個不錯的CSS解決方案，但是您將面臨另一個主要問題！ 流體行為如何？ 您可能不知道最后一行的高度和第一行的高度，因為您正在使用流體模板。

因此，這就是必須使用jQuery進行計算並計算最后一行的高度以及spacer元素的高度的地方。 從我的角度來看，沒有其他方法可以解決此問題。

因此，我為您提供了一些示例，只是為了給您一個想法：

jQuery的：

    $(document).ready(function () {
        setSizes();
    });

    $(window).resize(function () {
        setSizes();
    })

    function setSizes() {
        var lastRowHeight = $("div.last-container").height();
        $("div.spacer").height(lastRowHeight);
        $("div.last-container").css({ marginTop: -(lastRowHeight) });
        $("div.full-height-container").css({ paddingTop: lastRowHeight });
    }

您可以更改它以使其更有效！

現在，將它們放在一起：

查看資料

中行高度適合twitter-bootstrap網格系統

問題描述

1 個解決方案

解決方案1
0 2014-10-26 06:06:46

中行高度適合twitter-bootstrap網格系統

問題描述

1 個解決方案

解決方案1 0 2014-10-26 06:06:46

解決方案1
0 2014-10-26 06:06:46