Question

下面的bootstrap网格布局显示，在其大型配置中，有9个元素，排列如下：

[雕文1] [雕文2] [雕文3]

<标题1] [标题2] [标题3]

[文字1] [文字2] [文字3]

文本框有彩色背景。我希望这个彩色背景与每个文本框的大小相同，即使其中一个框中有更多的文本行。看起来.row-eq-height似乎是一个好的开始，但当然我所有的大文本div都不在同一行，行中也有其他div。

<div class="container-fluid PageView text-center">
            <div class="row Page2">
                <div class="col-sm-4">
                    <div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span>
                    </div>  
                </div>
                <div class="col-sm-4">
                    <div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="box">
                        <div class="row">
                            <div class="col-xs-6 col-sm-12">
                                <h2><strong>Title 1</strong></h2>
                            </div>
                            <div class="col-xs-6 col-sm-12">
                                <p class="lead">Text 1</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="box">
                        <div class="row">
                            <div class="col-xs-6 col-sm-12">
                                <h2><strong>Title 2</strong></h2>
                            </div>
                            <div class="col-xs-6 col-sm-12">
                                <p class="lead">Much Longer text, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed turpis quis lacus sagittis aliquam mollis at ipsum. Ut a blandit metus, et aliquet nunc. Ut commodo lorem tortor, ullamcorper.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="box">
                        <div class="row">
                            <div class="col-xs-6 col-sm-12">
                                <h2><strong>Title 3</strong></h2>
                            </div>
                            <div class="col-xs-6 col-sm-12">
                                <p class="lead">Text 3</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

任何建议都将不胜感激。

Answer 1

对于上一篇文章感到抱歉，你可以使用Jquery来达到最高点。 P：S在代码片段中不能很好地工作。可能因为没有添加bootstrap JS库

function ndFunction() {
    var y = document.getElementById("id2");
    y.value = y.value.toUpperCase();
}

$(document).ready(function() {
  var h = new Array();
  h[0] = $(".eqheight1").height();
  h[1] = $(".eqheight2").height();
  h[2] = $(".eqheight3").height();
  var largest = h.sort(function(a, b) {
    return a - b
  }).slice(-1);
  $(".eqheight3,eqheight2,.eqheight1").height(largest);
});

.eqheight1,
.eqheight2,
.eqheight3 {
  background: #cfcfcf;
}

在不同的行中构造时，使bootstrap列的高度相同吗？

1 个答案: