Question

我正在尝试对齐嵌入视频下面的3列。我希望列的边缘与视频的边缘对齐。我想我必须嵌套列但我不确定。这是我到目前为止，我该如何正确定制？我需要响应视频的列。

<div class="row">
  <div class="col-md-12">
    <div class="embed-responsive embed-responsive-16by9 video-wrapper center-block ">
      <iframe class="embed-responsive-item"  src="https://www.youtube.com/watch?v=b6hoBp7Hk-A"></iframe>
    </div>
    <div class="row">
      <div class="col-md-3 col-lg-offset-2">
        <h3 class="text-left">Record</h3>
        <p class="text-left">e 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into  </p>
      </div>
      <div class="col-md-3">
        <h3 class="text-left">Integrate</h3>
        <p class="text-left">
          electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</p>
      </div>
      <div class="col-md-2">
        <h3 class="text-left">Share</h3>
        <p class="text-left">electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</p>
      </div>
    </div>

CSS

@media all and ( min-width: 560px ) {
    .video-wrapper {
        width:797px;
        padding-bottom:444px !important;
    }
}

Answer 1

您可以设置嵌套的app.py static/ templates/宽度以匹配row宽度。

请参阅整页的摘录。

video-wrapper

@media all and (min-width: 560px) {
  .video-wrapper {
    max-width: 797px;
    border: 3px solid red;
  }
  .row.row-small {
    max-width: 797px;
    margin: 0 auto;
    border: 3px solid red;
  }
}
/*BORDER IS FOR DEMO ONLY*/

Answer 2

我包括Normalize和Bootstrap：

Live Preview in Codepen

您必须配置视频的高度：

这适用于下一个代码：

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Video and Columns with bootstrap</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>

  <!--Main content container-->
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <iframe width="100%" height="315" src="https://www.youtube.com/embed/b6hoBp7Hk-A" frameborder="0"></iframe>
      </div>
    </div>

    <!-- Three columns -->

    <div class="row">
      <div class="col-md-4">
        <h3>Record</h3>
        <p>e 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into</p>
      </div>

      <div class="col-md-4">
        <h3>Integrate</h3>
        <p>electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop.</p>
      </div>

      <div class="col-md-4">
        <h3>Hiya!</h3>
        <p>electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop.</p>
      </div>

    </div>
  </div>

</body>

</html>

＆＃13;

自定义bootstrap嵌套列对齐

2 个答案: