Bootstrap在旋轉木馬的兩側添加空白區域

我試圖在Twitter Bootstrap滑塊的兩側獲得一些填充。我使用簡單的示例代碼從引導方面進行一些修改。Bootstrap在旋轉木馬的兩側添加空白區域

在波紋管圖像中，你可以看到我想表達的意思。滑塊現在是100％的頁面寬度，但我嘗試讓一些較暗的一面顯示（頁面寬度的60％）。所以它應該保留20％中間60％和右側20％。

HTML：

<header id="karuselli" class="carousel slide row" > 
    <ol class="carousel-indicators"> 
     <li data-target="#karuselli" data-slide-to="0" class="active"></li> 
     <li data-target="#karuselli" data-slide-to="1"></li> 
     <li data-target="#karuselli" data-slide-to="2"></li> 
    </ol> 

    <div class="carousel-inner"> 
     <div class="item active"> 
      <div class="fill" style="background-image:url('https://placehold.it/1900x1080&text=Slide One');"></div> 
      <div class="carousel-caption"> 
       <h2>Caption 1</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="fill" style="background-image:url('https://placehold.it/1900x1080&text=Slide Two');"></div> 
      <div class="carousel-caption"> 
       <h2>Caption 2</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="fill" style="background-image:url('https://placehold.it/1900x1080&text=Slide Three');"></div> 
      <div class="carousel-caption"> 
       <h2>Caption 3</h2> 
      </div> 
     </div> 
    </div> 

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

SCSS：

$karusellikorkeus    : 50%; 
$paneelikorkeus    : 25px; 
$menuValikkoYksi    : 50%; 


.menuValikkoYksi { 
    margin-right: 20%; 
} 



html, 
body { 
    height: 100%; 
    background-color: #8c8c8c; 
} 

.carousel { 
    height: $karusellikorkeus; 
} 

.carousel-control.left, .carousel-control.right { 
    background-image: none 
} 


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

.body-top-padding { 
    padding-top: $paneelikorkeus + 90px; 
} 

.marginaali { 
    margin-top: $paneelikorkeus; 
    @include vp-background-size(cover); 
} 

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

hr { 
    color: red; 
    background-color: red; 
    padding: 2px 2px 2px 2px ; 
} 
footer { 
    margin: 50px 0; 
}

來源

2017-05-18 Niko9911

看到這個http://jsfiddle.net/1u22q6nx/ – Amal

哦，我正在處理錯誤的類和div。這就是爲什麼我沒有自己做到這一點。請將其添加爲答案，以便我可以接受它。 :) – Niko9911

試試這個代碼

.carousel { 
    height: 50%; 
    width: 60%; 
    margin: 0 auto; 
}

DEMO

來源

2017-05-18 04:17:37 Amal

Bootstrap在旋轉木馬的兩側添加空白區域

回答

相關問題