Question

我正在使用Bootstrap 3，我需要在 div 父级中设置两个垂直排列的 div 元素，并且每个div中应该有一个图像。所有图像都应该响应并适合div高度，因此 div1 的图像应该更大

 _____________
|div1 | div2  |
|     |-------
|_____|_div3__|

我在这里放了一个代码示例，但它不起作用。我该如何解决这个问题？

http://jsfiddle.net/fstarred/tonq8wdq/

Answer 1

使用正确宽度的bootstrap网格可以满足您的要求，如下所示 -

请参阅此working Fiddle

代码 -

<div class="row col-md-offset-1 col-md-10">
    <div class="panel panel-info"> 
        <div class="panel-heading"> 
            <h3 class="panel-title"><a href="#">title</a></h3> 
        </div> 
        <div class="panel-body">                            
            <div class="col-md-12">
                <div class="col-md-8 col-sm-8 col-xs-8">
                    <a href="#">
                        <img class="img-responsive" alt="main" src="http://a5.mzstatic.com/us/r30/Purple5/v4/5a/2e/e9/5a2ee9b3-8f0e-4f8b-4043-dd3e3ea29766/icon128-2x.png" />
                    </a>
                </div>          
                <div class="col-md-4 col-sm-4 col-xs-4">
                    <div class="row col-md-12">
                        <a href="#">
                            <img class="img-responsive" alt="col1" src="http://a5.mzstatic.com/us/r30/Purple5/v4/5a/2e/e9/5a2ee9b3-8f0e-4f8b-4043-dd3e3ea29766/icon128-2x.png" />
                        </a>
                    </div>
                    <div class="row col-md-12">
                        <a href="#">
                            <img class="img-responsive" alt="col2" src="http://a5.mzstatic.com/us/r30/Purple5/v4/5a/2e/e9/5a2ee9b3-8f0e-4f8b-4043-dd3e3ea29766/icon128-2x.png" />
                        </a>
                    </div>
                </div>                  
            </div>                                                  
        </div>
    </div>
</div>

bootstrap 3使div高度为父div的50％

1 个答案: