当前位置: 首页 > 面试题库 >

相同高度的列引导程序3行响应

国晟睿
2023-03-14
问题内容

嗨,我在引导行中有四个div。我希望此行中的所有div具有相同的高度,并且不要违反职责。我不承担责任就不知道该怎么做。

我尝试用固定的高度解决此问题,但就响应能力而言,这是一个糟糕的解决方案。

谢谢 :-)

<div class="row">
    <div class="col-md-3 index_div_item">
        <a href="#">
        <div class="well" id="item1">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
        </div>
        </a>
    </div>    
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item2">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
            </div>  
        </a>
    </div>    
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item3">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
            </div>
        </a> 
    </div>  
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item4">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
            </div>  
        </a>  
    </div>              
</div>

问题答案:

您可以使用javascript来实现。找出4个div的最大高度,并使其与最大div相同的高度。

这是代码:

$( document ).ready(function() {
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get();

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);
});

编辑历史记录:将“,”符号更改为“;” 标志



 类似资料:
  • http://www.bootply.com/somVIZEXxC#这是我的网站,基本上,我希望科尔-lg-6是相同的高度,这样我里面的图像是均匀的,目前,一个图像延伸到另一个下面。 编辑:当前版本http://www.bootply.com/UIWf6q09h4

  • 问题内容: 我目前正在使用Bootstrap中的Cards。 根据文字标题,我将获得不同高度的卡片,并希望与最高卡片具有相同的高度。 我不介意使用JS,我实际上认为这可能是解决问题的最佳方法。 我尝试过使用CSS之外的其他解决方案,例如使用flexbox。 作为一个动态示例,呈现的HTML是一个简单的示例: 问题答案: 该引导4列已经使用了Flexbox的,使他们 都 在 同一高度 。只需 在卡上

  • 我在设置引导行内div的响应高度时遇到问题。 在代码中,我有引导行,样式有背景色。在第一行内,有一个全宽的div“col xs 12”。在这个div中,我有一个包含表单控件标签的div 我必须调整这一行的背景色,使其高度在所有设备中保持不变。如何设置div和row的响应高度? 我的密码是,

  • 问题内容: 如果我有这样的div布局: 这使得像这样: 如何确保两列与最深列的高度相同?列高可以根据内容量灵活调整,并具有白色背景。 问题答案: 一种非常简单的常用方法是使用Faux Columns。 您将拥有一个看起来像这样的结构: 实际上,您可以应用背景图像来向2列中的每列添加任何背景颜色,边框等。

  • 问题内容: 我想知道是否有人可以解释如何在引导程序中获得7个相等的列?我想做一个日历。此代码似乎可以执行5: 我的主要内容有以下课程,所以我希望将7列放在其中: Col-lg-12 谁能解释这是否可能,或者我是否必须坚持偶数? 问题答案: 好吧,IMO,您可能需要使用CSS3 查询来覆盖列的。 这是我创建7列网格系统的尝试: 的价值来自: 工作演示- 运行代码段,然后单击“整页”。 其他选择 另外

  • 我刚刚回到学习引导,html和css。到目前为止,我有三张不同宽度的卡片,使用自举网格水平卡片模板。我的问题是,我希望我的布局是相同的每张卡片,标题和段落应该是相同的距离在每个和fav/info按钮从标题相同的距离。此外,我设法让前两列接近,但不知何故,最后一列和最大一列的图像和标题之间有奇怪的超大行间距。我该怎么做呢? 我试图手动调整每张卡中元素的位置,但很难让它们保持一致,这也让我的代码变得一