Bootstrap，两个响应式 iframe，彼此相邻

Question

我想要一个可以在我的网站上聊天的 Twitch 播放器。我需要它来响应。我正在与 Bootstrap.

合作

我有这个代码 HTML:

<div class="container-fluid">
            <div class="row">
                <div class="col-md-8 col-md-offset-1 nopadding">
                    <div id="player">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="player" src="https://player.twitch.tv/?volume=1&channel=example&autoplay=false" style="border: 0px; top:0px;" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 nopadding">
                    <div id="chat">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="chat" src="https://www.twitch.tv/example/chat?popout=" style="border: 0px;"></iframe>
                        </div>
                    </div>
                </div>
                <div class="col-md-offset-1"></div>    
</div>

CSS:

.nopadding {
padding: 0 !important; }

我正在使用这个 CSS 从网格中删除填充，我需要让播放器和聊天彼此相邻，没有填充。

问题是聊天太小了，就是身高太小了。我可以在css中设置高度，但是这个高度不会随着玩家的身高而变化。我该如何解决？

Answer 1

您可以通过将聊天包装器设置为绝对，然后将其中的 iframe 设置为 100% 的宽度和高度并将聊天包装器定位到 50% 的左侧并为其指定行来执行此操作全部包裹在 class 和相对位置中。然后在较小的屏幕上，您可以将聊天包装器定位到 0 的相对位置和左侧，这样当您达到移动宽度时它会堆叠在播放器下方。这是我使用的标记。同样在示例中，我使用了 col-sm，但您可以将其更改为 col-md 我只使用了 sm，因为它在 fiddle 演示中更容易查看。

这里有一个 fiddle 演示将输出屏幕拖动得更大和更小，以查看不同屏幕尺寸的结果 Fiddle Demo

Html:

<div class="container-fluid">
  <div class="row player-section">
    <div class="col-sm-6 no-padding">
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="player" src="https://player.twitch.tv/?volume=1&channel=example&autoplay=false" allowfullscreen></iframe>
      </div>
    </div>
    <div class="chat-wrapper">
      <iframe class="chat" src="https://www.twitch.tv/example/chat?popout="></iframe>
    </div>
  </div>
</div>

Css:

.no-padding{
  padding:0;
}
iframe{
  border:none;
}
.player-section{
  position:relative;
 }
.chat-wrapper{
  position:absolute;
  left:50%;top:0;right:0;bottom:0;
}
.chat-wrapper iframe{
  width:100%;
  height:100%;
}
@media screen and (max-width:767px){
  .chat-wrapper{position:relative;height:300px;left:0;}
}

Answer 2

另一种选择是创建您自己的自定义宽高比，如本 blog 中所述。

例如，如果您想在您的网页中显示 pdf（A4 大小），您可以将以下内容添加到您的样式中 sheet：

.embed-responsive-210by297 {
  padding-bottom: 141.42%;
}

现在您可以将自定义样式sheet添加到您的 iframe 中：

<div class="embed-responsive embed-responsive-210by297">                        
    <iframe src="..."></iframe>
</div>

通过自定义不同iframe的宽高比，您可以对齐所有iframe的高度以相互匹配。另一个优势是您遵循 bootstrap 理念。

Bootstrap，两个响应式 iframe，彼此相邻

Bootstrap, two responsive iframes, next to each other

responsive-design

twitter-bootstrap-3

twitch