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％并将该行设置为全部来完成此操作包裹在一个阶级和一个相关的位置。然后在较小的屏幕上，您可以将聊天包装器定位到相对和左侧0，这样当您到达移动宽度时，它将堆叠在播放器下方。这是我使用的标记。同样在示例中我使用了col-sm但你可以将它改为col-md我只是使用了sm，因为它更容易在小提琴演示中查看。

这是一个小提琴演示拖动输出屏幕越来越大，以查看不同屏幕尺寸的结果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 大小），您可以将以下内容添加到您的样式表中：

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

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

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

通过自定义不同 iframe 的纵横比，您可以对齐所有 iframe 的高度以相互匹配。另一个优势是您遵循引导程序哲学。

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

2 个答案: