1
早上好，定制Twitter的引导3旋转木马加上垂直/水平滚动条
我工作的一个新网站，将有一个旋转木马/信息块，在宽度占据了整整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 – 11 PM
</p>
<a href="#" title="Read More About..." class="readMoreButton">
READ MORE »
</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;
}
有谁有什么可能会导致这种情况的建议？