Html 自定义Twitter引导3旋转木马添加垂直/水平滚动条
早上好 我正在开发一个新的网站,该网站将有一个旋转木马/信息块,它占据了整个12栏的宽度。div将有一个灰白色的背景,旋转木马将覆盖9列,关于当前幻灯片的信息将位于右侧3列 在更大的屏幕上,它可以正确显示(大多数情况下,控件的位置仍然存在一些问题),但当它调整到移动和其他一些较小的尺寸时,浏览器将添加一个垂直滚动条,有时是水平滚动条(如下图所示) 一个活生生的例子可以在以下网址看到:Html 自定义Twitter引导3旋转木马添加垂直/水平滚动条,html,css,twitter-bootstrap,responsive-design,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Responsive Design,Twitter Bootstrap 3,早上好 我正在开发一个新的网站,该网站将有一个旋转木马/信息块,它占据了整个12栏的宽度。div将有一个灰白色的背景,旋转木马将覆盖9列,关于当前幻灯片的信息将位于右侧3列 在更大的屏幕上,它可以正确显示(大多数情况下,控件的位置仍然存在一些问题),但当它调整到移动和其他一些较小的尺寸时,浏览器将添加一个垂直滚动条,有时是水平滚动条(如下图所示) 一个活生生的例子可以在以下网址看到: http://162.243.29.11/HSCBored/ 转盘的HTML为: <div class
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-->
//
// 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;
}
}
转盘的SCS为:
<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-->
//
// 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;
}
}
该信息的SCS为:
/*
* — 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;
}
是否有人对造成这种情况的原因有任何建议?要删除滚动条,只需将jumbotrons overflow属性更改为“可见”。当设置为“自动”时,它将剪辑溢出其父级的任何内容
.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部分中其他文本元素的字体大小,以便在这些宽度范围内时,它的高度更接近jumbotron的高度