2017-06-06 66 views
2

我使用bootstrap-3在傳送帶內設置了一些網頁瀏覽。移動的左/右箭頭太大,妨礙了我的頁面的某些部分。如何修剪它們,使它們更小。我嘗試了試驗和錯誤來改變CSS,但沒有運氣。更改傳送帶左/右位置 - Bootstrap-3/HTML

enter image description here

.carousel { 
 
    position: relative; 
 
} 
 

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

 
.carousel-inner>.item { 
 
    position: relative; 
 
    display: none; 
 
    -webkit-transition: .30s ease-in-out left; 
 
    -o-transition: .30s ease-in-out left; 
 
    transition: .30s ease-in-out left; 
 
} 
 

 
.carousel-inner>.item>img, 
 
.carousel-inner>.item>a>img { 
 
    line-height: 1; 
 
} 
 

 
@media all and (transform-3d), 
 
(-webkit-transform-3d) { 
 
    .carousel-inner>.item { 
 
    -webkit-transition: -webkit-transform .30s ease-in-out; 
 
    -o-transition: -o-transform .30s ease-in-out; 
 
    transition: transform .30s ease-in-out; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -webkit-perspective: 1000px; 
 
    perspective: 1000px; 
 
    } 
 
    .carousel-inner>.item.next, 
 
    .carousel-inner>.item.active.right { 
 
    left: 0; 
 
    -webkit-transform: translate3d(100%, 0, 0); 
 
    transform: translate3d(100%, 0, 0); 
 
    } 
 
    .carousel-inner>.item.prev, 
 
    .carousel-inner>.item.active.left { 
 
    left: 0; 
 
    -webkit-transform: translate3d(-100%, 0, 0); 
 
    transform: translate3d(-100%, 0, 0); 
 
    } 
 
    .carousel-inner>.item.next.left, 
 
    .carousel-inner>.item.prev.right, 
 
    .carousel-inner>.item.active { 
 
    left: 0; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    } 
 
} 
 

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

 
.carousel-inner>.active { 
 
    left: 0; 
 
} 
 

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

 
.carousel-inner>.next { 
 
    left: 100%; 
 
} 
 

 
.carousel-inner>.prev { 
 
    left: -100%; 
 
} 
 

 
.carousel-inner>.next.left, 
 
.carousel-inner>.prev.right { 
 
    left: 0; 
 
} 
 

 
.carousel-inner>.active.left { 
 
    left: -100%; 
 
} 
 

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

 
.carousel-control { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 15%; 
 
    font-size: 20px; 
 
    color: #fff; 
 
    text-align: center; 
 
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6); 
 
    background-color: rgba(0, 0, 0, 0); 
 
    filter: alpha(opacity=50); 
 
    opacity: .5; 
 
} 
 

 
.carousel-control.left { 
 
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); 
 
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); 
 
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001))); 
 
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); 
 
    background-repeat: repeat-x; 
 
} 
 

 
.carousel-control.right { 
 
    right: 0; 
 
    left: auto; 
 
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); 
 
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); 
 
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5))); 
 
    background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); 
 
    background-repeat: repeat-x; 
 
} 
 

 
.carousel-control:hover, 
 
.carousel-control:focus { 
 
    color: #fff; 
 
    text-decoration: none; 
 
    filter: alpha(opacity=90); 
 
    outline: 0; 
 
    opacity: .9; 
 
} 
 

 
.carousel-control .icon-prev, 
 
.carousel-control .icon-next, 
 
.carousel-control .glyphicon-chevron-left, 
 
.carousel-control .glyphicon-chevron-right { 
 
    position: absolute; 
 
    top: 50%; 
 
    z-index: 5; 
 
    display: inline-block; 
 
    margin-top: -10px; 
 
} 
 

 
.carousel-control .icon-prev, 
 
.carousel-control .glyphicon-chevron-left { 
 
    left: 50%; 
 
    margin-left: -10px; 
 
} 
 

 
.carousel-control .icon-next, 
 
.carousel-control .glyphicon-chevron-right { 
 
    right: 50%; 
 
    margin-right: -10px; 
 
} 
 

 
.carousel-control .icon-prev, 
 
.carousel-control .icon-next { 
 
    width: 20px; 
 
    height: 20px; 
 
    font-family: serif; 
 
    line-height: 1; 
 
} 
 

 
.carousel-control .icon-prev:before { 
 
    content: '\2039'; 
 
} 
 

 
.carousel-control .icon-next:before { 
 
    content: '\203a'; 
 
} 
 

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

 
.carousel-indicators li { 
 
    display: inline-block; 
 
    width: 10px; 
 
    height: 10px; 
 
    margin: 1px; 
 
    text-indent: -999px; 
 
    cursor: pointer; 
 
    background-color: #000 \9; 
 
    background-color: rgba(0, 0, 0, 0); 
 
    border: 1px solid #fff; 
 
    border-radius: 10px; 
 
} 
 

 
.carousel-indicators .active { 
 
    width: 12px; 
 
    height: 12px; 
 
    margin: 0; 
 
    background-color: #fff; 
 
} 
 

 
.carousel-caption { 
 
    position: absolute; 
 
    right: 15%; 
 
    bottom: 20px; 
 
    left: 15%; 
 
    z-index: 10; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
    color: #fff; 
 
    text-align: center; 
 
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6); 
 
} 
 

 
.carousel-caption .btn { 
 
    text-shadow: none; 
 
} 
 

 
@media screen and (min-width: 768px) { 
 
    .carousel-control .glyphicon-chevron-left, 
 
    .carousel-control .glyphicon-chevron-right, 
 
    .carousel-control .icon-prev, 
 
    .carousel-control .icon-next { 
 
    width: 30px; 
 
    height: 30px; 
 
    margin-top: -10px; 
 
    font-size: 30px; 
 
    } 
 
    .carousel-control .glyphicon-chevron-left, 
 
    .carousel-control .icon-prev { 
 
    margin-left: -10px; 
 
    } 
 
    .carousel-control .glyphicon-chevron-right, 
 
    .carousel-control .icon-next { 
 
    margin-right: -10px; 
 
    } 
 
    .carousel-caption { 
 
    right: 20%; 
 
    left: 20%; 
 
    padding-bottom: 30px; 
 
    } 
 
    .carousel-indicators { 
 
    bottom: 20px; 
 
    } 
 
}
<div class="col-xs-2 col-md-10 col-md-push-1" style="margin-top:20px; margin-bottom:20px;"> 
 
    <div class="carousel slide" data-ride="carousel" id="carousel-example-generic"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li> 
 
     <li data-slide-to="1" data-target="#carousel-example-generic"></li> 
 
     <li data-slide-to="2" data-target="#carousel-example-generic"></li> 
 
    </ol> 
 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner"> 
 
     <div class="item active"> 
 
     <div> 
 
      <webview partition="persist:test1" src="www.google.com" style="width:100%; height:1480px"></webview> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <div> 
 
      <webview partition="persist:test1" src="www.google.com" style="width:100%; height:1480px"></webview> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <div> 
 
      <webview partition="persist:test1" src="www.google.com" style="width:100%; height:1480px"></webview> 
 
     </div> 
 
     </div> 
 
     <!-- Controls --> 
 
     <a class="left carousel-control" data-slide="prev" href="#carousel-example-generic" role="button"><span class="glyphicon glyphicon-chevron-left"></span></a> 
 
     <a class="right carousel-control" data-slide="next" href="#carousel-example-generic" role="button"><span class="glyphicon glyphicon-chevron-right"></span></a> 
 
    </div> 
 
    <!-- Carousel --> 
 
    </div> 
 
</div> 
 
<div class="col-xs-2 col-md-10 col-md-push-1" style="margin-top:20px; margin-bottom:20px;"> 
 
    <div class="carousel slide" data-ride="carousel" id="carousel-example-generic1"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li class="active" data-slide-to="0" data-target="#carousel-example-generic1"></li> 
 
     <li data-slide-to="1" data-target="#carousel-example-generic1"></li> 
 
     <li data-slide-to="2" data-target="#carousel-example-generic1"></li> 
 
    </ol> 
 
    </div> 
 
</div>

+1

你有沒有試圖改變的'.carousel-control'寬度較小的百分比或一個固定的值? – WizardCoder

回答

1

編輯以下CSS

.carousel-control { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    width: 8%; /* change this value to required width */ 
    font-size: 20px; 
    color: #fff; 
    text-align: center; 
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6); 
    background-color: rgba(0, 0, 0, 0); 
    filter: alpha(opacity=50); 
    opacity: .5; 
} 
+0

非常感謝!我嘗試了很多事情,只是搞砸了!這是非常好的 - 非常感謝 –

+0

你可以繼續並接受答案嗎?歡呼:) – TheDarkKnight

相關問題