Question

我是Bootstrap＆amp; amp;的新手HTML。

在我的HTML中，我有一个容器和一行内有3列。在我的情况下，最后一部分的标题比其他部分更长，需要以2行显示。

因此，此部分的文本处于比其他部分更低的位置。

我的问题：是否可以在标题之后将所有这些文本垂直放在同一位置？

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 library (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();});

计算Bootstrap中元素的高度以进行垂直对齐

3 个答案: