css 화면 부트 스트랩 3.0-같은 행에 3 개의 패널을 세로로 정렬(자동 높이)



부트스트랩 테이블 (1)

내용에 따라 높이가 확장되고 모두 높이가 맞춰져있는 3 개의 패널로 구성된 단일 행을 사용하려고했습니다. 왼쪽 패널에는 그래프가 표시되고 오른쪽 그래프에는 왼쪽 그래프와 함께 작동하는 테이블이 있습니다.

이 작업의 예는이 템플릿입니다. 예를 들어 여기를 클릭하십시오 .

<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>

그리드 열을 중첩하려면 다음을 참조 하십시오. 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>

업데이트 위의 예제에서 autoheight 부분을 잊어 버렸습니다. 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)
});




alignment