Jquery 使用引导程序，如何正确清除列？

我知道你们希望这里的代码能够帮助解决问题，但我使用的是引导，所以这是他们的代码。如果你看一下花名册部分，高度都是一团糟。我有两个老套的解决方案，一个是进入，特别是在某些div上放置一个带有clear的类：两个都是，另一个解决方案是在列上应用一个固定的高度。我想要有活力的东西

目前，某些名册成员的位置不正确，它应该是一个向上4列的网格

另外，避免创建两个帖子。我还有第二个问题。我不知道如何在视频中添加背景图像。我的css是：

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

我遇到的另一个问题是将.banner文本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;
}

但这不起作用，这就是为什么我在沙发上垫了填充物来伪装它

我对这整个前端的东西有点陌生，所以如果你们能了解任何东西，我愿意接受任何建议。

背景图片

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

您可以为其设置

宽度

和

高度

，并使用

边距：自动
当列具有可变高度时，会发生这种情况。引导使用
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应该只在浏览器处于相应的视口大小时生效。这样做的方法是使用
可见lg块
、
可见md块
、
可见sm块
和
可见xs块
类，以便它们仅在适当的大小下有效

以下是一个例子：

<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>

然后给上面的行和容器一个
高度：100%
。你可以给他们ID，这样你就可以在css中定位他们，或者直接内联操作。
Bootstrap的row类为你做这件事。您可以限制每行的元素数，也可以显式设置每个元素的高度而不使用行。后一种方法将允许您根据视口大小改变项目的数量

对于一个复杂的网格，可能需要使用第n个child或者甚至添加您自己的数值类来明确地清除浮点。
我正在尝试这个/*#花名册列表div:n个child（4）：{content:；display:table；clear:both；}之后我尝试添加可见的-*-block div，但仍然没有任何效果。我还制作了您提到的元素高度：100%，但在制作过程中，我似乎丢失了我的按钮。我已将代码推到联机状态，以便您查看。我已使可见sm块和可见xs块工作，但由于某些原因，md块不工作。@DarrenBachan啊，您还应该在所有具有可见md块的div上添加一个
可见lg块
。那么它应该会起作用。另外，您没有包括那些具有可见sm块的，每4列后面都有一个。我更新了我的答案以反映这一点。@DarrenBachan关于这个按钮，我不记得第一次它放在哪里了。我想你可以把它放在一个div中，这个div有
display:table cell；垂直对齐：中间对齐让它也垂直居中放置在文本旁边。我一直将它放在.banner text div中，它消失了。按钮向右浮动。我希望它拥抱右边，在左边文本的基线上。
.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;
}