Question

我尝试创建一个具有复杂网格的布局（对我来说），并在中间创建具有max-width选项的图像。布局应该完全响应，我必须使用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/

这仅适用于台式机，但是如果我调整窗口的大小，列将不会针对移动视图重新排序。图像也不会对响应选项做出反应。

我不知道我的代码示例是否没有满足我要求的最佳结构？

修改这只是一个实验，不一定必须是

。结果Mobile应该是正常行为，首先显示左侧区域，然后显示图片，最后显示右侧区域。

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

非常感谢您的帮助。

Answer 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; }

您可以在需要时通过媒体查询将其删除。

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

1 个答案: