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