css - bootstrap 3 使 div 高度为父 div 的 50%

标签 css html twitter-bootstrap twitter-bootstrap-3

<分区>


关闭 7 年前

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

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

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

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

最佳答案

使用正确的 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>

关于css - bootstrap 3 使 div 高度为父 div 的 50%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33939908/

上一篇:php - 样式化 PHP 回显表

下一篇:css - 在响应式站点中使用 uncss 删除不需要的 css

相关文章:

javascript - 在 foreach 循环中添加一次标题

php - 将我的注册表单连接到我的 php 类和函数的初始步骤

javascript - 使用 JavaScript 在表中添加和删除行

ajax - ASP4.5.1、Bootstrap、带 AJAX 控制工具包在 iOS 浏览器上引发 ScriptManager 错误

javascript - UIWebView - 将本地 CSS 加载到远程网站

php - 选中复选框时隐藏表格行

html - 如何在打印时将文本放在右上角而不显示按钮

php - 当我使用以下代码 : 从目录中调用导航时,下拉导航菜单中断

javascript - 增加弹出背景的高度

html - 为什么 ~ 选择器在这里不起作用?