Question

我试图在Twitter 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;
}

Answer 1

试用此代码

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

DEMO

Bootstrap在旋转木马的两侧添加空白区域

1 个答案: