Question

这里引导新手。

我试图引导一个旧页面，但我似乎无法弄清楚如何阻止我的图像溢出到下一列。我有一排有两列 - 左边有一张图片。一旦我减小窗口宽度，我的图像将开始溢出到右列，并最终在右列顶部折叠。我希望左列宽度保持静态或折叠到右列的顶部，直到图像不再适合左列。

我已经尝试将图像响应类添加到图像中，但这只会改变我的图像尺寸，我希望图像保持其尺寸。任何帮助将不胜感激！

这是我的代码：https://www.codeply.com/go/fb14u8fsSc

Answer 1

它是否类似于您正在寻找的那个？

但有几点注意事项：

可能是因为您的简化代码示例，但您使用<div class="row"><div class="col-md-12">…X…</div></div>，这相当于…X…。这简化了事情。
我们在这里讨论Bootstrap 4（您也在代码中使用它），但.img-responsive类来自Bootstrap 3.在Bootstrap 4中class被称为.img-fluid。
关于内联式边距，我建议改为使用spacing utility classes。

<div class="container-fluid" style="position: fixed">
    <div class="row">
        <div class="col">
            <div class="card my-3">
                <div class="card-header"></div>
                
                <div class="card-body">
                    Insert name here<br/>
                    <img src="https://dummyimage.com/188x225/000/fff" class="XXXimg-fluid" alt=""/>
                </div>

                <div class="card-footer"></div>
            </div>
        </div>

        <div class="col-md-9">
            <div class="card text-xs-center mt-3">
                <div class="card-header"></div>
                <div class="card-body"></div>
            </div>
        </div>
    </div>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

Bootstrap 4 - 调整窗口大小时图像从列溢出

1 个答案: