Question

我只是涉足CSS和HTML。目前我在该列中有一个<article>应该有两个项目，左边是图片，右边是文章信息（标题和段落）。当屏幕放大时看起来没问题，但是如果屏幕缩小图像并且文本缩小。而不是缩小我寻找图像以保持它的大小和文本下降到图像下方。

http://codepen.io/anon/pen/Yygdjv

<div class="container-fluid">
<div class="row">
    <aside class="col-sm-1">            
    </aside>
    <section class="col-sm-7">
        <article>
            <div class="row">
                <aside class="col-xs-6">
                    <img src="http://i0.wp.com/www.sooziq.com/wp-content/uploads/2015/11/32.jpg?resize=270%2C200"/>
                </aside>
                <aside class="col-xs-6">
                    <div id="DIV___5">
                        <span id="SPAN___6"> <a href="http://www.sooziq.com/category/miscellaneous/" id="A___7">Basketball</a></span>
                        <h2 id="H2___8">
                            <a href="http://www.sooziq.com/22045/he-colored-his-phones-camera-the-reason-why-will-amaze-you/" rel="bookmark" id="A___9">What really Matters</a>
                        </h2>
                        <span id="SPAN___10">November 12, 2015</span>
                        <p id="P___11">
                            Make sure you load up on the fluids and snacks and use the washroom because these are the top 3 things to watch for in basketball! <a href="http://www.sooziq.com/22045/he-colored-his-phones-camera-the-reason-why-will-amaze-you/" id="A___12">Read More</a>
                        </p>
                    </div>
                </aside>
            </div>
        </article>
    </section>
</div>
</div>

Answer 1

这是一个twitter bootstrap 3问题。您可以将这两列的col-xs-6更改为col-sm-6或col-md-6。在sm或md断点之后（无论你选择哪个），它会使两列全宽，图像自然会在顶部。对于这两列，您可以更明确地使用class="col-xs-12 col-sm-6"，但这不是必需的。

演示文稿：http://codepen.io/anon/pen/GpezRL

Answer 2

您还可以使用@media规则（可选），如 -

@media (max-width:580px)

    {
    .col-xs-6 {
        width: 50%;
        clear: both;
    }
    }

将旁边的柱子放在下面的旁边

2 个答案: