具有响应式图像的复杂网格不起作用答案

【问题标题】：Complex grid with responsive image dont't work具有响应式图像的复杂网格不起作用
【发布时间】：2018-12-13 23:48:39
【问题描述】：

我尝试创建一个带有复杂网格的布局（对我来说），并在 middel 中创建一个带有最大宽度选项的图像。布局应该是完全响应的，我必须使用 Bootstrap 3。

我知道以下解决方案：

<div class="container">
    <div class="row" style="margin-bottom:50px; display: flex;flex-wrap: wrap;min-height:600px;">
        <div class="col-md-3" style="background: #xccc; margin-bottom:-15px;padding:7px;">
            <p>
                Should be at top ...
            </p>            
            <div style="position:absolute;bottom:0;">
                <p>Lorem ipsum (bottom)</p>
                <p>
                2016-2018<br />
                Lorem ipsum dolor...<br />
                123<br /><br />
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                </p>
            </div>
        </div>
        <div class="col-md-7 text-center">
            <img src="https://dummyimage.com/600.png/09f/fff" class="img-responsive center-block" id="img" style="max-width:600px;" />
        </div>
        <div class="col-md-2" style="background: #ccc;">
            <p>
                Should be at top ...
            </p>
            <p>
                Schould be at bottom <br />
                <img src="https://dummyimage.com/squarebutton/09f/fff" class="img-responsive" style="width:70px;float:left;margin-right:5px;" />
                <img src="https://dummyimage.com/squarebutton/09f/fff" class="img-responsive" style="width:70px;" />
            </p>
        </div>

    </div>
</div>

http://jsfiddle.net/1m6gw2dt/

这仅适用于桌面，但如果我调整窗口大小，则列不会为 mobilde 视图重新排序。图像也不会对响应选项做出反应。

我不知道我的代码示例的结构是否符合我的要求？

编辑这只是一个实验，不一定是

。结果Mobile应该是一个正常的行为，左边区域先出现，然后图片，最后右边区域。

编辑 2 为了澄清，我插入了一张图片

非常感谢您的帮助。

【问题讨论】：

如果你试图做的是把第二个 p “应该在顶部”，在页面的顶部，我什至认为这是不可能的。但也许我误解了。你能提供一个绘图/线框图，甚至是它在移动设备上的外观吗？
这只是一个实验，不一定是
。在移动端的结果应该是一个正常的行为，左边区域首先出现，然后是图片，最后是右边区域。
你好，当你使用flex时，不需要使用absolute。心缘也。例如jsfiddle.net/1m6gw2dt/1，您可以使用css-tricks.com/snippets/css/a-guide-to-flexbox 作为提醒或教程；）
@Paulie_D 我附上了一张图片。
你好。我仍然不确定我是否跟随图像。如果您想在移动设备上进行更改，您可能希望查看 Bootstrap 中的推拉类。首先构建移动设备并在屏幕更大时重新排序。

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

【解决方案1】：

我不确定这是否正是您所需要的，但如果您想推到顶部和底部，那么 flexbox 是您的最佳选择。

https://jsbin.com/bijekaqoji/edit?html,css,js,output

<div class="big-boy-box"> <p>I'm at the top</p> <p>I'm at the bottom</p> </div>

.big-boy-box { height: 500px; border: 5px solid red; display: flex; flex-direction: column; justify-content: space-between; }

您可以随时通过媒体查询来删除它。

【讨论】：