計算Bootstrap中元素的高度以進行垂直對齊

Question

我是Bootstrap和HTML的新手。

在我的HTML中，我有一個容器和一行，里面有3列。 在我的情況下，最后一節的標題比其他標題長得多，需要兩行顯示。

因此，本節的文字位置比其他節的位置低。

我的問題：是否可以將標題后的所有這些文本垂直放置在同一位置？

HTML代碼示例：

<div class="container">

    <div class="row">
        <div class="col-lg-12 text-center">
            <h2 class="section-heading">MAIN_TITLE</h2>
        </div>
    </div>

    <div class="row text-center">

        <div class="col-md-3">
            <span class="fa-stack fa-4x">
                <i class="fa fa-circle fa-stack-2x text-primary"></i>
                <i class="fa fa-search fa-stack-1x fa-inverse"></i>
            </span>

            <h4 class="service-heading">TITLE_1</h4>
            <div class="text-muted eqHeight"> TEXT_1</div>
        </div>

        <div class="col-md-3">
            <span class="fa-stack fa-4x">
                <i class="fa fa-circle fa-stack-2x text-primary"></i>
                <i class="fa fa-search fa-stack-1x fa-inverse"></i>
            </span>

            <h4 class="service-heading">TITLE_2</h4>
            <div class="text-muted eqHeight"> TEXT_2</div>
        </div>

        <div class="col-md-3">
            <span class="fa-stack fa-4x">
                <i class="fa fa-circle fa-stack-2x text-primary"></i>
                <i class="fa fa-search fa-stack-1x fa-inverse"></i>
            </span>

            <h4 class="service-heading">TITLE_3</h4>
            <div class="text-muted eqHeight"> TEXT_3</div>
        </div>

        <div class="col-md-3">
            <span class="fa-stack fa-4x">
                <i class="fa fa-circle fa-stack-2x text-primary"></i>
                <i class="fa fa-search fa-stack-1x fa-inverse"></i>
            </span>

            <h4 class="service-heading">TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_4</h4>
            <div class="text-muted eqHeight"> TEXT_4</div>
        </div>

    </div>

</div>

它是這樣的：

Answer 1

在您的代碼中，文本居中對齊。 我已經刪除了。 檢查評論。 然后在title_title_title..so等長文本中，我提供了一個編碼為換行符的空格。 在列設置中，您已經提供了三次“ col-md-3”，使其寬度的四分之三。 因此將其更改為“ col-md-3，col-md-3，col-md-6”。

看看這個。

<div class="container">

    <div class="row">
        <div class="col-md-12 text-center">
            <h2 class="section-heading">MAIN_TITLE</h2>
        </div>
    </div>

    <div class="row ">  // removed text-center

        <div class="col-md-3">
            <span class="fa-stack fa-4x">
                <i class="fa fa-circle fa-stack-2x text-primary"></i>
                <i class="fa fa-search fa-stack-1x fa-inverse"></i>
            </span>

            <h4 class="service-heading">TITLE_1</h4>
            <div class="text-muted"> TEXT_1</div>
        </div>

        <div class="col-md-3">
            <span class="fa-stack fa-4x">
                <i class="fa fa-circle fa-stack-2x text-primary"></i>
                <i class="fa fa-search fa-stack-1x fa-inverse"></i>
            </span>

            <h4 class="service-heading">TITLE_2</h4>
            <div class="text-muted"> TEXT_2</div>
        </div>

        <div class="col-md-6"> // here col-md-3 changed to col-md-6
            <span class="fa-stack fa-4x">
                <i class="fa fa-circle fa-stack-2x text-primary"></i>
                <i class="fa fa-search fa-stack-1x fa-inverse"></i>
            </span>

            <h4 class="service-heading">TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE _TITLE_TITLE_TITLE_TITLE_ TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_3</h4> // here provided with a space.
            <div class="text-muted"> TEXT_3</div>
        </div>

    </div>

</div>

Answer 2

更改答案：現在，我在這里得到了您的要求，我建議使用eqHeight庫（jQuery） 。 它與Bootstrap一樣具有魅力，它的作用是自動計算最高元素的高度並將其他元素的高度調整為相同。

在這種情況下，您可以執行以下操作：

<div class="row">
   <div class="col-md-4">
     <i class="service-heading eqHeight">Content here</i>
     <i>More content here!</i>
   </div>
   <div class="col-md-4">
     <i class="service-heading eqHeight">Content here</i>
     <i>More content here!</i>
   </div>
   <div class="col-md-4">
     <i class="service-heading eqHeight">Content here</i>
     <i>More content here!</i>
   </div>
</div>

關鍵是使eqHeight庫指向.eqHeight類，並使其將較高的元素（在本例中為.service-heading類）計算為相同的高度。

這可能需要附加的CSS，但不應該僅是height和max-height屬性。

對於響應式設計，垂直定位是一個小問題。 對此的另一種解決方案是在現有行的下方再增加一行，並在其中設置相同的列，但是當站點因移動而中斷時，該行當然不起作用。

Answer 3

包括jQuery，只需編寫javascript以查找和設置較大的高度。

function max-height(){
    var height=0;
    var mHeight=0;
    $('.service-heading').each(function(){
        height = $(this).height();
        if(height>mHeight)
           mHeight = height;
    });
    $('.service-heading').height(mHeight);
    height=0;
    mHeight=0;
}

然后在ready（）和resize（）上調用此函數

 $( document ).ready(function() {max-height();});
 $( window ).resize(function() {max-height();});