.top-section {
height: auto;
padding-top: 100px;
text-align: center;
background: green;
}
.card-header {
position: relative;
height: 175px;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-color: rgba(255, 255, 255, .15);
background-blend-mode: overlay;
@include border-radius(4px 4px 0 0);
margin: .5rem;
}
.card {
background: gray;
position: relative;
width: 100%;
border: none;
.card-img-top {
padding: 2rem;
padding-bottom: 0rem;
}
.card-block {
position: relative;
padding: 2rem;
}
.card-text {
text-align: center;
margin-bottom: 0;
}
.card-title {
text-align: center !important;
line-height: 1rem
}
}
.col-md-4 .col-lg-4 {
margin-bottom: 10rem !important;
}
.other {
position:relative;
top:840px;
background:blue;
}
.other_2{
position:relative;
top:840px;
background:pink;
}<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<html>
<section id="intro" class="top-section">
<div class="container-fluid" style="height:250px">
<div class="row">
<div class="col-lg-12">
<h3>Lorepsum Text Lorepsum Text</h3>
</div>
</div>
<div class="container-full" style="top:15%; position:relative !important; background:transparent">
<div class="row">
<div class="col-md-4 col-lg-4">
<div class="card">
<div class="card-img-top">
<img class='img-responsive' src="https://source.unsplash.com/category/nature/800x400" />
</div>
<div class="card-block">
<h4 class="card-title">TITLE</h4>
<hr>
<p class="card-text"> Magni inventore repellat dignissimos eveniet dolore ex sit illo adipisci accusamus quos</p>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="card">
<div class="card-img-top">
<img class='img-responsive' src="https://source.unsplash.com/category/nature/800x400" />
</div>
<div class="card-block">
<h4 class="card-title">TITLE</h4>
<hr>
<p class="card-text"> Magni inventore repellat dignissimos eveniet dolore ex sit illo adipisci accusamus quos</p>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="card">
<div class="card-img-top">
<img class='img-responsive' src="https://source.unsplash.com/category/nature/800x400" />
</div>
<div class="card-block">
<h4 class="card-title">TITLE</h4>
<hr>
<p class="card-text"> Magni inventore repellat dignissimos eveniet dolore ex sit illo adipisci accusamus quos</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="background:black; height:100% !important">blabla</div>
</section>
<section class="other">
<div class="container-fluid">
<div class="row">
This is another section and I should be always adjust and be below the videos on any screen resolution.
</div>
</div>
</section>
<section class="other_2">
<div class="container-fluid">
<div class="row">
This is another section and I should be always below blue seciton
</div>
</div>
</section>我怎样才能实现与 Bootstrap 附带的图像类似的东西？
我想让卡片在第 1 部分和第 2 部分之间 float ，以包含视频。我的问题是当卡片堆叠时，我需要第 2 部分更大一些，以便卡片底部和第 2 部分开头之间有一个空间。
最佳答案
使用 flexbox 和定位三个较小的 div。 请参阅我的代码示例:
#divTop {
height: 100px;
background-color: grey;
}
#divMiddle {
background-color: #ccc;
height: 100px;
width: 100%;
display: -webkit-flex;
display: flex;
}
#divA, #divB, #divC {
background-color: #e9c9c9;
border: 1px solid blue;
height: 50px;
position: relative;
top: -30px;
margin: 5px auto;
width: 20%;
}
#divBottom1 {
height: 100px;
background-color: grey;
}
#divBottom2 {
height: 100px;
background-color: #ccc;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="divTop" class="col-xs-12"></div>
<div id="divMiddle" class="col-xs-12">
<div id="divA">Div A</div>
<div id="divB">Div B</div>
<div id="divC">Div C</div>
</div>
<div id="divBottom1" class="col-xs-12"></div>
<div id="divBottom2" class="col-xs-12"></div>
</div>关于html - 使用 Bootstrap 动态更改顶部的部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44335330/