Question

我想使用引导程序在一行的两列中保留一个文本编辑器（textarea）和一个iframe，这是相同的HTML代码。

<div class="container">
    <div class="row">
        <div class="col">
            <div id="editor"></div>
        </div>
        <div class="col" class="embed-responsive embed-responsive-1by1">
            <iframe id="renderHTML" srcdoc="" class="embed-responsive-item"></iframe>
        </div>
    </div>
</div>

我面临的问题是textarea和iframe的大小都非常小，我不想明确指定两者的宽度和高度，因为设计不会保持响应速度。增大两者的大小并保持设计可疑的解决方案是什么？

Answer 1

使用视口单位：

1vw =页面宽度的1％ 1vh =页面高度的1％

您可以像使用像素一样使用它，但要比它有响应。

示例：

<iframe src="http://example.com" width="50vw" height="50vw"></iframe>

此iframe等于页面宽度和高度的50％。

Answer 2

col类看起来无效，请尝试以下操作：

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div id="editor"></div>
        </div>
        <div class="col-sm-6" class="embed-responsive embed-responsive-1by1">
            <iframe id="renderHTML" srcdoc="" class="embed-responsive-item"></iframe>
        </div>
    </div>
</div>

使用引导程序时的响应大小

2 个答案: