Bootstap傳送帶不能在div內工作

我正在建立一個使用Bootstrap並使用100％高度的傳送帶的網站。問題是，它的工作原理，但不在另一個分區。我的Joomla系統默認生成兩個div，所以我無法避免。我應該如何解決這個問題？Bootstap傳送帶不能在div內工作

DEMO與DIV（不工作）：https://jsfiddle.net/55gfw2jg/

DEMO沒有DIV（工作）：https://jsfiddle.net/55gfw2jg/1/

HTML：

 <div> 
     <div> 
     <header id="myCarousel" class="carousel slide"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
      <li data-target="#myCarousel" data-slide-to="2"></li> 
     </ol> 

     <!-- Wrapper for Slides --> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <!-- Set the first background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 1</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <!-- Set the second background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 2</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <!-- Set the third background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 3</h2> 
       </div> 
      </div> 
     </div> 

     <!-- Controls --> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
      <span class="icon-prev"></span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
      <span class="icon-next"></span> 
     </a> 

    </header> 
    </div> 
    </div>

CSS：

html, 
body { 
    height: 100%; 
} 

.carousel, 
.item, 
.active { 
    height: 100%; 
} 

.carousel-inner { 
    height: 100%; 
} 

/* Background images are set within the HTML using inline CSS, not here */ 

.fill { 
    width: 100%; 
    height: 100%; 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
}

JS：

$('.carousel').carousel({ 
    interval: 5000 //changes the speed 
})

如果我在<header>之前和之後刪除兩個「div」，代碼將起作用。我如何使它工作？因爲它是由Joomla生成的，所以我無法取消這兩個div。

來源

2016-06-12 Elaine Byene

div有沒有寬度或高度，你需要給他們一個寬度：100％;和高度：100％; – Bosc

的問題是多餘的div的高度補充說：這裏正在擺弄着兩個你divs- https://jsfiddle.net/55gfw2jg/3/

我說：

div{ 
    height:100%; 
}

來源

2016-06-12 00:14:19 Don

的問題是兩個outter div的沒有高度，所以你旋轉木馬的高度爲100％，基於高度爲0.

給予div高度爲100％可能導致與其他div的問題，所以如果您無法控制這兩個outter div並且它們是總是一個在你的代碼的最頂端你可以使用一些jquery爲第一個div和第一個div添加一個類，然後將高度分配給這些類。

jQuery的

$("div").first().addClass("outter"); 
$("div div").first().addClass("inner");

CSS

.outter, .inner{ 
     height: 100%; 
}

看到小提琴https://jsfiddle.net/x07q5o6z/

來源

2016-06-12 00:24:58 Bosc

Bootstap傳送帶不能在div內工作

回答

相關問題