Question

我真的被困在这里了。只要我尝试缩小页面大小，iframe就会转到下一行。 iframe旁边的文字没有环绕图像。调整大小时，我不希望iframe移动到段落下方。我正在使用bootstrap 3.这是我的代码。谁能看到我做错了什么？由于我是编码新手，请让我知道我需要做什么。感谢。

＆＃13;

.video-feature p {
    text-align: justify;
}

.video {
    position: relative;
    padding-bottom: 56.25%;
    
}

.video iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 374px;
    max-height: 210px;
}

＆＃13;

    <div class="video-feature">
        <div class="container">
            <div class="row">
                <div class="col-md-7">
                    <h2>Ji-Sung Park becomes an ambassador</h2>
                    <p>Massa Ipsum Feugiat Massa Semper Bibendum Sagittis Convallis Porttitor donec mi lorem. Nulla morbi hymenaeos habitant, maecenas hymenaeos luctus ullamcorper ligula arcu congue curabitur malesuada fusce justo facilisi. Odio eu facilisi magnis porta condimentum. Integer facilisi odio. Vivamus dui pretium Fringilla tempus vulputate odio.Mattis ut lorem viverra magnis auctor praesent elit sociis habitasse placerat tempus dapibus. Nunc, varius adipiscing est donec neque est sed fusce luctus primis</p>
                </div>       
                <div class="col-md-5">
                <br>
                    <div class="video">
                        <iframe src="http://www.youtube.com/embed/3Q9qf7xzw4Y" frameborder="0" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

＆＃13;

Answer 1

只需将col-sm-7和col-sm-5分别添加到您的div，因为这样可以在较小的（sm）屏幕上保持相同的布局。

所以你的新代码看起来像这样：

<div class="video-feature">
    <div class="container">
        <div class="row">
            <div class="col-md-7 col-sm-7">
                <h2>Ji-Sung Park becomes an ambassador</h2>
                <p>Massa Ipsum Feugiat Massa Semper Bibendum Sagittis Convallis Porttitor donec mi lorem. Nulla morbi hymenaeos habitant, maecenas hymenaeos luctus ullamcorper ligula arcu congue curabitur malesuada fusce justo facilisi. Odio eu facilisi magnis porta condimentum. Integer facilisi odio. Vivamus dui pretium Fringilla tempus vulputate odio.Mattis ut lorem viverra magnis auctor praesent elit sociis habitasse placerat tempus dapibus. Nunc, varius adipiscing est donec neque est sed fusce luctus primis</p>
            </div>       
            <div class="col-md-5 col-sm-5">
            <br>
                <div class="video">
                    video
                </div>
            </div>
        </div>
    </div>
</div>

以下是您可以使用的演示：http://www.bootply.com/PaOzjKC8yN（请注意，出于演示目的，我删除了iframe，因为bootply因某些原因不允许显示iframe，因此将其替换为{{1} }}）。

以下是Bootstrap documentation explaining the Grid system的链接。

在bootstrap 3中调整大小时，如何将文本和iframe保持在同一行？

1 个答案: