节与引导

节与引导

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

我怎样才能实现类似附有引导图像的东西动态变化的顶部？

我想要在第1和第2部分之间浮动的卡片包含视频。我的问题是，我需要第2要大一些时，卡将叠加，以便有卡片的底部，并开始第2节

来源

2017-06-02 John R

分享您的代码 – tech2017

，你能告诉我们你的实际输出？我想看看它与你连接的图片有什么不同 – niceman

刚刚添加了一个片段，注意如何有一个蓝色和粉红色的部分，而不是他们上面的视频卡部分。 –

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

来源

2017-06-02 20:00:54 Zeronull

CSS代码解决方案之间的空间：

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

对于纯模板引导溶液：

研究找到自举相当于上面根据需要然后再稍微。

来源

2017-06-02 18:51:06

您能否使用提供的代码片段显示示例？ –

大声笑，所以代码为你 –

回答

相关问题