Question

我正在使用flexbox将项目居中对齐（因为似乎没有其他工作）。虽然bootstrap响应式嵌入似乎完全消失，我不知道为什么。我无法在嵌入时使用position: relative，因为这会阻止它的响应。这是它的代码......

＆＃13;

.embed-responsive {
  /*position: initial;*/ /* if set to initial or anything other than relative is re-appears but is no longer responsive */
}

body {
  background: grey;
}

div.title-area {
    height: 350px;
    width: 100%;
    position: relative;
    padding: 0 50px 0 50px;
}

div.title-area .video {
    box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}

div.title-area > .col-md-6 {
    min-height: 100%;
    display: flex;
    align-items: center;
}

div.title-area h1 {
    text-shadow: 0 3px 6px rgba(0, 0, 0, .35);
    margin: 0;
    text-transform: uppercase;
    /*vertical-align: middle;
    display: table-cell;
    position: relative;*/
}

.title-area h1 > small{
    color: white;
    font-size: 15px;
    text-indent: 5px;
    display: block;
    opacity: .6;
    text-transform: uppercase;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="title-area">
    <div class="col-md-6">
        <h1>main title<small>subtitle</small></h1>
    </div>
    <div class="col-md-6">
        <div class="embed-responsive embed-responsive-16by9 video">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rqEy5_W6YHQ?showinfo=0"></iframe>
          </div>
    </div>
</div>

＆＃13;

JSFiddle

Answer 1

看一下Grid system，您可以在两行中插入“col-md-6”，如下面的信息中所示：

body {
  background: grey;
}

div.title-area {
  height: 350px;
  width: 100%;
  position: relative;
  padding: 0 50px 0 50px;
}

div.title-area .video {
  box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}

div.title-area > .col-md-6 {
  min-height: 100%;
  display: flex;
  align-items: center;
}

div.title-area h1 {
  text-shadow: 0 3px 6px rgba(0, 0, 0, .35);
  margin: 0;
  text-transform: uppercase;
  /*vertical-align: middle;
  display: table-cell;
  position: relative;*/
}

.title-area h1 > small{
  color: gray;
  font-size: 15px;
  text-indent: 5px;
  display: block;
  opacity: .6;
  text-transform: uppercase;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="title-area">
    <div class="row">
        <div class="col-xs-6">
            <h1>main title<small>subtitle</small></h1>
        </div>
        <div class="col-xs-6">
            <div class="embed-responsive embed-responsive-16by9 video">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rqEy5_W6YHQ?showinfo=0"></iframe>
            </div>
        </div>
    </div>
</div>

Answer 2

在嵌入响应div周围添加一个div，以便前者可以在flex div中流动，后者可以具有embed-responsive-item所需的相对位置。为新div赋予flex-grow样式1，使其大小。

HTML：

<div class="title-area">
  <div class="col-md-6">
    <h1>main title<small>subtitle</small></h1>
  </div>
  <div class="col-md-6">
    <div style="flex-grow: 1;">
      <div class="embed-responsive embed-responsive-16by9 video">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rqEy5_W6YHQ?showinfo=0"></iframe>
      </div>
    </div>

  </div>
</div>

样式：

.embed-responsive {
  // position: initial;
  /* if set to initial or anything other than relative is re-appears but is no longer responsive */
}

body {
  background: grey;
}

div.title-area {
  height: 350px;
  width: 100%;
  position: relative;
  padding: 0 50px 0 50px;
}

div.title-area .video {
  box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}

div.title-area > .col-md-6 {
  min-height: 100%;
  display: flex;
  align-items: center;
}

div.title-area h1 {
  text-shadow: 0 3px 6px rgba(0, 0, 0, .35);
  margin: 0;
  text-transform: uppercase;
  /*vertical-align: middle;
    display: table-cell;
    position: relative;*/
}

.title-area h1 > small {
  color: white;
  font-size: 15px;
  text-indent: 5px;
  display: block;
  opacity: .6;
  text-transform: uppercase;
}

https://jsfiddle.net/rz5cmpz3/2/

在flexbox内部，Bootstrap响应嵌入消失了吗？

2 个答案: