Bootstrap 4 - 高度爲100％的容器

所以在這裏我遇到了Bootstrap 4（也是Flexbox）的問題。下面是代碼： HTML：Bootstrap 4 - 高度爲100％的容器

<section id="intro"> 
    <div class="container-fluid"> 
     <div class="row align-items-center"> 
      <div class="col align-self-center"> 
       <h1>We design things</h1> 
      </div> 
     </div> 
    </div> 
</section>

和CSS：

#intro { 
    min-height: 65vh; 
    background-image: url("../img/intro.png"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
} 
.container-fluid { 
    height: 100%; 
    min-height: 100%; 
}

我想.container流體始終是它的100％的父的高度，因此，如果部分有100vh，容器應另外，如果它有50vh，它也應該有50vh。我怎麼做？如果高度是h1的高度，我不能使用flexbox居中。

來源

2017-01-24 grhu

一般來說，當你想要一個元素作爲其父元素的高度時，使父元素成爲一個flex容器。

#intro { 
    min-height: 65vh; 
    background-image: url("../img/intro.png"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
    display: flex; /* NEW */ 
}

柔性容器的初始設置是align-items: stretch。這意味着柔性容器的孩子會自動拉伸容器的整個尺寸爲的。在行方向上，這將是高度。因此，將display: flex或display: inline-flex應用於section#intro。

來源

2017-01-24 14:38:21

不幸的是，這不起作用 - 容器現在居中，但它仍然具有h1元素的高度，而不是節。 – grhu

你的問題是關於使'容器流感'與父母相同的高度。 –

這裏是整個代碼：http://codepen.io/GRHU/pen/jywoQV 是的，我想製作.container-fluid，它在#intro部分的全部高度是它的父級，它是65vh，然後使用Bootstrap 4類來使其水平和垂直居中。 – grhu

Bootstrap 4 - 高度爲100％的容器

回答

相關問題