jumbotron风格的助推器4中的衰退旋转木马

Question

我发现了一个我非常喜欢jumbotron的设计，但是我想在背景中淡入图像，我已经阅读过最适合在旋转木马上运行时使用的图像。

我偶然发现了一个great example of code，它甚至居中放置图像，但在匹配基本布局之后，我无法完全组合样式，并且它不适用于我更喜欢​​使用的引导程序4。

下面是相关的HTML和CSS代码（与显示它的链接工作）：

工作自举3：https://www.bootply.com/iW6Tn3ks6I

首选的风格（包括导航栏）：https://www.bootply.com/LdBa0MzdpV

我已经已经做了一些调整，但我的CSS知识是有限的，我不知道从哪里去。例如，jumbotron文本有很多填充，我似乎无法找到CSS的哪一行与它相关。

编辑：得到工作的过渡，但褪色没有做任何事情，并调整窗口时，无法垂直居中的文本（top或bottom可以在carousel-overlay设置，但不能同时） - https://www.bootply.com/Vq9kNFcfPA

编辑2：从here修改答案，并得到它的工作。

Answer 1

你可以只添加需要你的CSS。

<div class="header clearfix"> 
    <div class="row"> 
     <div class="col-sm-3"><h3 class="text-muted">Project name</h3> 
     </div> 
     <div class="col-sm-9 float-right"><nav> 
     <ul class="nav nav-pills pull-right"> 
     <li class="nav-item"> 
      <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">About</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Contact</a> 
     </li> 
     </ul> 
    </nav> 
     </div> 
    </div> 
    </div> 

body { 
    color: #5a5a5a; 
    padding-top: 1.5rem; 
    padding-bottom: 1.5rem; 
} 

/* Custom page header */ 
.header { 
    padding-bottom: 1rem; 
    border-bottom: .05rem solid #e5e5e5; 
} 
/* Make the masthead heading the same height as the navigation */ 
.header h3 { 
    margin-top: 0; 
    margin-bottom: 0; 
    line-height: 3rem; 
} 


/* Carousel Fade Effect */ 
.carousel.carousel-fade .item { 
    -webkit-transition: opacity 1s linear; 
    -moz-transition: opacity 1s linear; 
    -ms-transition: opacity 1s linear; 
    -o-transition: opacity 1s linear; 
    transition: opacity 1s linear; 
    opacity: .5; 
} 
.carousel.carousel-fade .active.item { 
    opacity: 1; 
} 
.carousel.carousel-fade .active.left, 
.carousel.carousel-fade .active.right { 
    left: 0; 
    z-index: 2; 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 

.carousel-overlay { 
    position: absolute; 
    bottom: 100px; 
    right: 0; 
    left: 0; 
    color: white; 
    text-shadow: 1px 1px 1px rgba(0,0,0,.75); 
} 

.carousel-overlay h1 { 
    font-size: 3.5em; 
} 


.slide1, .slide2, .slide3 { 
    min-height: 560px; /* Must have a height or min-height set due to use of background images */ 
    background-size: cover; 
    background-position: center center; 
} 
.slide1 { 
    background-image: url(http://placekitten.com/1000/300); 
} 
.slide2 { 
    background-image: url(http://placekitten.com/1100/300); 
} 
.slide3 { 
    background-image: url(http://placekitten.com/1200/300); 
} 

/* Responsive: Portrait tablets and up */ 
@media screen and (min-width: 48em) { 
    /* Remove the padding we set earlier */ 
    .header, 
    .marketing, 
    .footer { 
    padding-right: 0; 
    padding-left: 0; 
    } 
    /* Space out the masthead */ 
    .header { 
    margin-bottom: 2rem; 
    } 
    /* Remove the bottom border on the jumbotron for visual effect */ 
    .jumbotron { 
    border-bottom: 0; 
    } 
}