Question

我正在尝试为以下线框构建HTML布局 -

它基本上是两列内容。第一个是bootstrap col-8，第二个是col-4。

现在在第一列中，我有一个视频组件需要根据可用宽度（66％）响应调整大小。为此，我使用以下CSS代码 -

.video-embed {
  position: relative
  padding-bottom: 56.25%
  height: 0 
  overflow: hidden

  iframe {
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
  }
}

视频下方的

是300px高静态内容，宽度为100％。我不介意，如果在某些屏幕上这稍微低于视口。

在另一栏中，我有一个4：3的容器，我再次使用上面的代码来维持比例而不明确设置高度。

下面需要一个需要简单占据可用高度的部分。页面中的宽度。

但由于那个（4:3）顶部的元素没有固定的高度，即使视频没有固定的高度，我也无法布局最后一个组件（右下角）。 / p>

我是否正在使用bootstrap朝着正确的方向前进？我可以遵循任何其他布局技术来布局所有这些东西吗？

此布局中最重要的部分是16：9视频。我对UI设计有点新意，所以很难找到它。

谢谢！

Answer 1

你没有说什么版本的Bootstrap，但从版本3.2开始，你可以使用内置的嵌入式类（参见响应嵌入@ https://www.w3schools.com/bootstrap/bootstrap_images.asp）：

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

您还可以查看http://videojs.com/getting-started/#customize

等框架

16：9比例视频与其他响应组件

1 个答案: