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在旋转木马的两侧添加空白区域

回答

相关问题