使用引导程序动态更改顶部的部分

Question

＆＃13;

＆＃13;

igv-drag-drop-index-file-icon

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

如何实现与bootstrap附带的图像类似的东西？

我希望在第1和第2部分之间放置卡片以包含视频。我的问题是，当卡片堆叠时，我需要第2部分更大，这样卡片的底部和第2部分的开头之间就有一个空格。

Answer 1

CSS代码解决方案：

将这些div元素定义为文档的正常流程中的position:absolute;，但是relative到它的容器;然后给它们超过容器的高度，对齐，等。然后使用容器元素应用：overflow: visible;取决于您下面的内容，您可能还需要切换这些元素，或者z-index property下方的内容元素

对于纯模板引导程序解决方案：

研究找到与上述相同的引导，然后根据需要进行调整。

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