【问题标题】:Bootstrap col max height with imageBootstrap col最大高度与图像
【发布时间】:2017-02-09 20:08:02
【问题描述】:

我尝试在引导程序上排成一行,使用 3 张图片:


(来源:hostingpics.net

但我不知道如何......我想在行上有 2 个 col,并且图像 B 和图像 C 的第二个 col 的大小必须与第一个 col 的大小相同,由图像 A 的大小决定。

当我尝试这样做时,附加的是根据图像 B 和 C 的大小,行采用第二列高度的大小。

图像 B 和 C 可以有随机大小,不确定。

与答案相关的备注:

行必须总是第一列的大小,即使图像 B 和 C 的高度相加后的实际大小更大,这意味着图像 B 和 C 必须调整它们的大小以适合 first 列的 height,由图像 A 确定。因此,对于您的测试,您应该在第二列 (> height) 上有大图片图片 A)。

感谢您的帮助。

【问题讨论】:

    标签: html css image twitter-bootstrap


    【解决方案1】:

    您可以有嵌套的行。第一行分为 2 列。第一列包含图像 A。第二列内部有两行,单列,图像 B 和图像 C 各 1 列。

    <div class="row">
        <div class="col-xs-6">
            <img src="image-a">
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-12">
                    <img src="image-b">
                </div>
                <div class="col-xs-12">
                    <img src="image-c">
                </div>
            </div>
        </div>
    </div>
    

    看到这个:http://codepen.io/anon/pen/BLwzZx

    【讨论】:

    • 这不好,所有的问题是如果图像b和图像c的高度大于图像a的高度,则整行取第二列的高度。该行必须是始终第一列的高度,即图像 a 的高度。在第二列中,图像必须调整其高度以适应此尺寸。
    猜你喜欢
    • 2021-03-10
    • 2018-12-22
    • 1970-01-01
    • 2020-10-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-02-04
    相关资源
    最近更新 更多