Question

我的Bootstrap Carousel出了问题。问题是在使用css进行转换期间，一张幻灯片与另一张幻灯片之间的布局。对于背景的一小部分而言，它会将初始的css样式重新应用于文本和背景。

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

/*carousel*/
.absolute {
  margin-bottom: -46px;
  text-align: center;
  top: 250px;
  position: relative;
  z-index: 100;
  color: white;
  text-transform: uppercase;
  font-size: 3em;
}
.index .item.active {
  height: 450px;
  background-image: url(images/first-back.jpg);
  background-position: 0 5%;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(51, 51, 51, 0.34);
  background-blend-mode: multiply;
}
.carousel-inner .item:nth-child(2) {
  background: url(images/ac-bottom.jpg);
  height: 450px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 52%;
  background-color: rgba(51, 51, 51, 0.34);
  background-blend-mode: multiply;
}
.carousel-inner .item:nth-child(3) {
  background: url(images/grills-slider.jpg);
  height: 450px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 52%;
  background-color: rgba(51, 51, 51, 0.34);
  background-blend-mode: multiply;
}
.carousel-inner .item:nth-child(4) {
  background: url(images/store.jpg);
  height: 450px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 52%;
  background-color: rgba(51, 51, 51, 0.34);
  background-blend-mode: multiply;
}
.index .item:nth-child(4) h1 {
  text-decoration: underline;
}
.item.active h1 {
  font-size: 2em;
  color: white;
  text-align: center;
  position: relative;
  top: 66%;
  text-transform: uppercase;
}

＆＃13;

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <h1>Is relaxing</h1>
    </div>
    <div class="item">
      <h1>IS PEACE OF MIND</h1>
    </div>
    <div class="item">
      <h1>IS CONFIDENCE</h1>
    </div>
    <div class="item">
      <h1>STARTS HERE</h1>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

＆＃13;

您可以注意到，我在html中使用背景图片而不是普通标签。最后，我在旋转木马外面使用了一个h1

<h1 class="absolute">COMFORT</h1>

出于布局目的，这将保持不变。

提前谢谢

Answer 1

UPD。避免使用.active类进行装饰。此类提供幻灯片之间的转换。你可以看到.carousel-inner > .item.active和。{ .carousel-inner > .active中定义了@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); .carousel-inner { margin-top: 2%; } .carousel-inner .item { height: 450px; background-image: url(//placehold.it/600x200/69c/def/?text=first); background-size: cover; background-repeat: no-repeat; background-position: 0% 52%; background-color: rgba(51, 51, 51, 0.34); background-blend-mode: multiply; } .carousel-inner .item:nth-child(2) { background-image: url(//placehold.it/600x200/9c6/efd/?text=second); } .carousel-inner .item:nth-child(3) { background-image: url(//placehold.it/600x200/c69/fde/?text=third); } .carousel-inner .item:nth-child(4) { background-image: url(//placehold.it/600x200/96c/edf/?text=fourth); } .carousel-inner .item h1 { color: white; font-size: 2em; text-align: center; text-transform: uppercase; position: absolute; top: 60%; left: 0; right: 0; } .carousel-inner .item:nth-child(4) h1 { text-decoration: underline; }。

请检查新密码。这是你想要实现的目标吗？

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <h1>Is relaxing</h1>
    </div>
    <div class="item">
      <h1>Is peace of mind</h1>
    </div>
    <div class="item">
      <h1>Is confidence</h1>
    </div>
    <div class="item">
      <h1>Starts here</h1>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

void Application_AcquireRequestState(object sender, EventArgs e)
{
    System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo(HttpContext.Current.Session["userCulture"]);
    System.Threading.Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo(HttpContext.Current.Session["userCulture"]);
}

Answer 2

确实是因为我添加了一些其他代码行（css样式）来为我的代码（javascript模块）中的模块设置样式。这种风格包含两个类（右和左）.right和.left，它们干扰了我的风格（bootstrap carousel将类左右添加到旋转木马的每张幻灯片中）。问题解决了！

Answer 3

如果在转换过程中幻灯片之间出现空白区域，您可能需要尝试更改Twitter Bootstrap代码.carousel-inner {overflow：hidden; to .carousel-inner {overflow：visible; }。

Answer 4

需要从隐藏更改为可见

.carousel-inner { 
    overflow: visible; 
}

然后添加到body标签

overflow-x: hidden;

Bootstrap转盘有白色背景在从幻灯片的转折期间到另一个

4 个答案: