Bootstrap 3.0 - 垂直对齐同一行中的 3 个面板（自动高度）

Posted 2023-03-05

【中文标题】Bootstrap 3.0 - 垂直对齐同一行中的 3 个面板（自动高度）

【英文标题】：Bootstrap 3.0 - Vertically align 3 panels in the same row (Auto Height)

【发布时间】：2013-09-10 22:57:02

【问题描述】：

尝试拥有 3 个面板的单行，其中高度根据内容扩展，并且它们都正确对齐。左侧面板中有一个图表，右侧的两个面板将有与左侧图表一起使用的表格。 这个工作的例子是这个模板：Click Here For Example

<div class="row">
    <div class="col-md-8">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">Panel content
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">Panel content
            </div>
        </div>
    </div>
</div>

【问题讨论】：

哇，那个链接的资源是 AdiminLTE 面板，它的另一个名字是从哪里来的？只是想把它扔出去。

【参考方案1】：

嵌套您的网格列，请参阅：http://getbootstrap.com/css/#grid-nesting

示例：http://bootply.com/79487

html

<div class="container">
    <div class="row">

        <div class="col-sm-6">
                         <div class="panel panel-success">
                            <div class="panel-heading">
                              <h3 class="panel-title">Graph</h3>
                            </div>
                            <div class="panel-body">
                              <img src="http://dummyimage.com/600x500/000/fff&amp;text=Graph" class="img-responsive">
                            </div>
                          </div>
            </div>



        <div class="col-sm-6">
                <div class="row">
                    <div class="col-sm-12">
                          <div class="panel panel-primary">
                            <div class="panel-heading">
                              <h3 class="panel-title">Panel title</h3>
                            </div>
                            <div class="panel-body">
                              Panel content
                            </div>
                          </div>
                        </div>  
                    <div class="col-sm-12">  
                          <div class="panel panel-success">
                            <div class="panel-heading">
                              <h3 class="panel-title">Panel title</h3>
                            </div>
                            <div class="panel-body">
                              Panel content
                            </div>
                          </div>    
                    </div>
                </div>  
        </div>          
    </div>      
</div>

更新我忘记了上面示例的自动高度部分，您可以从 https://***.com/a/12330800/1596547 使用：

$( window ).load(function()    

boxes = $('.col-sm-6');
maxHeight = Math.max.apply(
Math, boxes.map(function() 
return $(this).height();
).get());
boxes.height(maxHeight);
$('.col-sm-12 .panel').height(maxHeight/2-22);//22 = 20 (bottom-margin) + 2 *1 (border)
);

【讨论】：

我理解那部分，但我需要它们都具有相同的高度，无论它们内部的内容如何。请参阅所有面板在行中的高度相同的示例。谢谢——

对不起，我忘记了自动高度部分，请参阅***.com/questions/10771713/…

谢谢！自动高度部分对我来说非常有用。