html - 定制的 Twitter Bootstrap 3 Carousel 添加垂直/水平滚动条

Question

早上好

我正在开发一个新网站，该网站将以轮播/信息片段为特色，占据全部 12 列的宽度。 div 将具有灰白色背景，轮播将覆盖 9 列，有关当前幻灯片的信息将位于其右侧 3 列。

在较大的屏幕上，它显示正确(在大多数情况下，控件的位置仍然存在一些问题)，但是当它调整到移动设备和其他一些较小的尺寸时，浏览器将添加一个垂直滚动条，有时是水平滚动条(如下图所示)

可以在以下位置看到一个活生生的例子:

http://162.243.29.11/HSCBored/

轮播的 HTML 是:

<div class="row">
            <div class="jumbotron">
                <div class="col-lg-9 col-md-9 col-sm-9" id="inJumbotronSlider">
                    <div id="mainCarousel" class="carousel slide" data-ride="carousel">
                        <!--Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#mainCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#mainCarousel" data-slide-to="1"></li>
                            <li data-target="#mainCarousel" data-slide-to="2"></li>
                        </ol>

                        <!--Wrapper for slides-->
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="img/slider/img1.jpg" alt="Image 1">
                            </div>
                            <div class="item">
                                <img src="img/slider/img2.jpg" alt="Image 2">
                            </div>
                            <div class="item">
                                <img src="img/slider/img3.jpg" alt="Image 3">
                            </div>
                        </div>

                        <!--Controls-->
                        <a class="left carousel-control" href="#mainCarousel" role="button" data-slide="prev">
                            <span class="fa fa-chevron-left fa-2x"></span>
                        </a>
                        <a class="right carousel-control" href="#mainCarousel" role="button" data-slide="next">
                            <span class="fa fa-chevron-right fa-2x"></span>
                        </a>
                    </div><!--End Carousel-->
                </div><!--End #inJumbotronSlider-->
                <div class="col-lg-3 col-md-3 col-sm-3">
                    <div class="sliderData" id="sliderData1">
                        <h2>LAMBORGHINI CAR SHOW</h2>
                        <p>
                            <strong>DATE:</strong> Thursday, June 27th<br />
                            <strong>LOCATION:</strong> Somewhere, VA<br />
                            <strong>TIME:</strong> 6 &ndash; 11 PM
                        </p>
                        <a href="#" title="Read More About..." class="readMoreButton">
                            READ MORE &raquo;
                        </a>
                    </div><!--End #sliderData1-->
                </div>
            </div><!--End Jumbotron-->
        </div><!--End Row-->

超大屏幕的 SCSS 是:

//
// Jumbotron
// --------------------------------------------------


.jumbotron {
  //padding: $jumbotron-padding;
  margin-bottom: $jumbotron-padding;
  color: $jumbotron-color;
  //background-color: $jumbotron-bg;
  background-color: $warmWhite;
  overflow: auto;

  h1,
  .h1 {
    color: $jumbotron-heading-color;
  }
  p {
    margin-bottom: ($jumbotron-padding / 2);
    //font-size: $jumbotron-font-size;
    font-size: 14px;
    line-height: 2;
    font-weight: 200;
  }

  .container & {
    border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container
  }

  .container {
    max-width: 100%;
  }

  @media screen and (min-width: $screen-sm-min) {
    //padding-top:    ($jumbotron-padding * 1.6);
    //padding-bottom: ($jumbotron-padding * 1.6);

    .container & {
      //padding-left:  ($jumbotron-padding * 2);
      padding-right: ($jumbotron-padding * 2);
    }

    h1,
    .h1 {
      font-size: ($font-size-base * 4.5);
    }
    }
    }

轮播的 SCSS 是:

//
// Carousel
// --------------------------------------------------


// Wrapper for the slide container and indicators
.carousel {
  position: relative;
}

.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;

  > .item {
    display: none;
    position: relative;
    @include transition(.6s ease-in-out left);

    // Account for jankitude on images
    > img,
    > a > img {
      @include img-responsive();
      line-height: 1;
    }
  }

  > .active,
  > .next,
  > .prev { display: block; }

  > .active {
    left: 0;
  }

  > .next,
  > .prev {
    position: absolute;
    top: 0;
    width: 100%;
  }

  > .next {
    left: 100%;
  }
  > .prev {
    left: -100%;
  }
  > .next.left,
  > .prev.right {
    left: 0;
  }

  > .active.left {
    left: -100%;
  }
  > .active.right {
    left: 100%;
  }

}

// Left/right controls for nav
// ---------------------------

.carousel-control {
  position: absolute;
  top: 45%;
  left: 0;
  bottom: 0;
  width: $carousel-control-width;
  @include opacity($carousel-control-opacity);
  font-size: $carousel-control-font-size;
  color: $carousel-control-color;
  text-align: center;
  text-shadow: $carousel-text-shadow;
  // We can't have this transition here because WebKit cancels the carousel
  // animation if you trip this while in the middle of another animation.

  // Set gradients for backgrounds
  &.left {
    //@include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
  }
  &.right {
    left: auto;
    right: 0;
    //@include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
  }

  // Hover/focus state
  &:hover,
  &:focus {
    outline: none;
    color: $carousel-control-color;
    text-decoration: none;
    @include opacity(.9);
  }

  // Toggles
  .icon-prev,
  .icon-next,
  .glyphicon-chevron-left,
  .glyphicon-chevron-right {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
  }
  .icon-prev,
  .glyphicon-chevron-left {
    left: 50%;
  }
  .icon-next,
  .glyphicon-chevron-right {
    right: 50%;
  }
  .icon-prev,
  .icon-next {
    width:  20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    font-family: serif;
  }

  .icon-prev {
    &:before {
      content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
    }
  }
  .icon-next {
    &:before {
      content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
    }
  }
}

// Optional indicator pips
//
// Add an unordered list with the following class and add a list item for each
// slide your carousel holds.

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  margin-left: -30%;
  padding-left: 0;
  list-style: none;
  text-align: center;

  li {
    display: inline-block;
    width:  10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    border: 1px solid $carousel-indicator-border-color;
    border-radius: 10px;
    cursor: pointer;

    // IE8-9 hack for event handling
    //
    // Internet Explorer 8-9 does not support clicks on elements without a set
    // `background-color`. We cannot use `filter` since that's not viewed as a
    // background color by the browser. Thus, a hack is needed.
    //
    // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
    // set alpha transparency for the best results possible.
    background-color: #000 \9; // IE8
    background-color: rgba(0,0,0,0); // IE9
  }
  .active {
    margin: 0;
    width:  12px;
    height: 12px;
    background-color: $carousel-indicator-active-bg;
  }
}

// Optional captions
// -----------------------------
// Hidden by default for smaller viewports
.carousel-caption {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 20px;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: $carousel-caption-color;
  text-align: center;
  text-shadow: $carousel-text-shadow;
  & .btn {
    text-shadow: none; // No shadow for button elements in carousel-caption
  }
}


// Scale up controls for tablets and up
@media screen and (min-width: $screen-sm-min) {

  // Scale up the controls a smidge
  .carousel-control {
    .glyphicon-chevron-left,
    .glyphicon-chevron-right,
    .icon-prev,
    .icon-next {
      width: 30px;
      height: 30px;
      margin-top: -15px;
      margin-left: -15px;
      font-size: 30px;
    }
  }

  // Show and left align the captions
  .carousel-caption {
    left: 20%;
    right: 20%;
    padding-bottom: 30px;
  }

  // Move up the indicators
  .carousel-indicators {
    bottom: 20px;
  }
}

信息的 SCSS 是:

/*
* — Slider —
*/
#inJumbotronSlider {
    padding-left: 0;
    padding-right: 0;
}
.readMoreButton {
    background-color: $mediumOrange;
    color: white;
    font-size: 18px;
    padding: 10px;
}
.smallReadMoreButton {
    background-color: $mediumOrange;
    color: white;
    font-size: 12px;
    padding: 5px;
}

有没有人对可能导致这种情况的原因有任何建议？

Answer 1

要删除滚动条，您只需将超大屏幕溢出属性更改为“可见”即可。当它设置为 auto 时，它会剪辑任何溢出其父项的内容。

.jumbotron{
overflow:visible; //let content overflow
......

就此处的布局而言，一些更改将有助于进一步:

// Reduces size of Header so that it fits in to its parents container
@media (max-width: 980px) { 
.sliderData h1{
font-size: 25px;
margin-top:10px;
}
}

// Change your .sliderData h1 font size at lower widths to your preference

我建议您减小 .sliderdata 部分中其他文本元素的字体大小，使其高度在这些宽度范围内时更接近超大屏幕的高度。