Question

http://darrenbachan.com/playground/syau/index.html#!/

我知道你们希望这里的代码可以帮助解决问题，但我使用的是bootstrap，所以它是他们的代码。如果你看看名单部分，高度都搞砸了。我有两个hacky解决方案，一个进入并专门在某些div上放置一个明确的类：两个，另一个解决方案是在列上应用固定高度。我想要一些动态的东西。

现在某些名册成员的位置不正确，它应该是一个4柱的网格。

另外，要避免创建两个帖子。我有第二个问题。我无法弄清楚如何在我的视频上放置背景图像。我的css是：

.full-img {
        background: url('../img/fallback.jpg');
        background-size: cover;
    }

我所遇到的另一个问题是垂直居中.banner-text div，我的代码是：

.banner-text {
    position: relative;
    z-index: 200;
    text-align: left;
    display: table;
    padding-top: 60px;
    padding-bottom: 60px;
    float: left;
}
.banner-text h1 {
    display: table-cell;
    vertical-align: middle;
}

但那不起作用，这就是为什么我在div上填充伪造它。

我对这整个前端的东西都很陌生，所以如果你们有所收获，我会对任何其他建议持开放态度。

Answer 1

当列具有可变高度时会发生这种情况。 Bootstrap使用float属性水平对齐列。这允许我们在总列大小大于12时将列包装到下一行。不幸的是，如果一行中的任何列的高度高于其他行，您会注意到下一行中的列将在之后开始上一行中较大的列。

传统上解决这个问题的方法是使用“clearfix”。使用clear:both声明的div，它将下一个元素移动到所有先前浮动元素的底部。

Bootstrap有一个名为.clearfix的辅助类，你应该在每12个列单元后放入一个空div 。在您的情况下，这意味着永远4 .col-md-3（因为4×.col-md-3 = 12），每3 .col-sm-4之后（因为3×.col-sm-4 = 12），之后每2 .col-xs-6（因为2×.col-xs-6 = 12）。但是，只有当浏览器处于相应的视口大小时，clearfix才会生效。您这样做的方法是使用visible-lg-block，visible-md-block，visible-sm-block和visible-xs-block类，这样它们只会以适当的大小生效。

以下是一个例子：

<div class="col-xs-6 col-sm-4 col-md-3"></div> <div class="col-xs-6 col-sm-4 col-md-3"></div><div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4 col-md-3"></div><div class="clearfix visible-sm-block"></div> <div class="col-xs-6 col-sm-4 col-md-3"></div><div class="clearfix visible-xs-block visible-md-block visible-lg-block"></div> <div class="col-xs-6 col-sm-4 col-md-3"></div> <div class="col-xs-6 col-sm-4 col-md-3"></div><div class="clearfix visible-xs-block visible-sm-block"></div> <div class="col-xs-6 col-sm-4 col-md-3"></div> <div class="col-xs-6 col-sm-4 col-md-3"></div><div class="clearfix visible-xs-block visible-md-block visible-lg-block"></div>

注意由于常见的倍数而使用多个visible-*-block类。

Bootstrap 4的注释：

由于Bootstrap 4使用较新的flexbox布局模型而不是浮点数，因此不再需要此解决方案。

对于横幅文本的垂直对齐方式：

看起来你走在正确的轨道上，你只需要给.banner-text一个100％的高度，你需要对包裹的.row和.container做同样的事情。它。

基本上，

.banner-text { position: relative; z-index: 200; text-align: left; display: table; padding-top: 60px; padding-bottom: 60px; float: left; height:100% } .banner-text h1 { display: table-cell; vertical-align: middle; }

然后将行和容器放在height:100%上方。你可以给他们ID，这样你就可以在css中定位它们或者只是内联它。

Answer 2

用于背景图片

background: url("../img/image.jpg") no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;

对于h1，您可以设置width＆amp; height用它并使用margin:auto;

Answer 3

Bootstrap的行类为您完成此操作。您可以限制每行的元素数量，也可以显式设置每个元素的高度而不使用行。后一种方法允许您根据视口大小改变项目数。

对于精心设计的网格，可能需要使用n-child明确清除浮动，或者甚至添加自己的数字类。

使用bootstrap，如何正确清除列？

3 个答案:

Bootstrap 4的注释：

对于横幅文本的垂直对齐方式：