引導-3外

我有一個自舉-3轉盤用3×表示的DIV每次。你可以點擊右鍵和左鍵來顯示下3個DIV。但我的指標是一個可以點擊的整個區域，即灰色塊。是否有可能點擊？另外，如何讓東西遠離我的DIV，現在它與我的內容重疊？格拉西亞斯！

HTML：

<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><!-- Slider Content (Wrapper for slides)--> 

    <div class="carousel-inner"> 
     <div class="item active"> 
      <div class="col-md-4 col-sm-6"> 
       <p> 
      aaaaaaaaaaaaaaaaaaaa</p> 
      </div> 

      <div class="col-md-4 col-sm-6 hidden-xs"> 
       <p>bbbbbbbbbbbbbb</p> 
      </div> 

      <div class="col-md-4 col-sm-6 hidden-sm hidden-xs"> 
       <p>cccccccccccccc</p> 
      </div> 
     </div> 

     <div class="item"> 
      <div class="col-md-4 col-sm-6"> 
       <p>dddddddddddddd</p> 
      </div> 

      <div class="col-md-4 col-sm-6 hidden-xs"> 
       <p>eeeeeeeeeeeeee</p> 
      </div> 

      <div class="col-md-4 col-sm-6 hidden-sm hidden-xs"> 
       <p>ffffffffffffff</p> 
      </div> 
     </div> 
    </div> 
</div><!-- Controls --> 
<a class="left carousel-control" data-slide="prev" href= 
"#carousel-example-generic"><span class= 
"glyphicon glyphicon-chevron-left"></span></a> <a class= 
"right carousel-control" data-slide="next" href= 
"#carousel-example-generic"><span class= 
"glyphicon glyphicon-chevron-right"></span></a>

CSS：

.carousel-indicators li { visibility: hidden; } 

.carousel-inner .item { 
font-size:10px; 
color:#0404B4 
} 

.carousel-control { 
z-index: 10; 
top: 2%; 
font-family: 'Helvetica Neue', Arial, sans-serif; 
}

來源

2015-04-06 raulbaros

請儘量表現出[微創完整的示例]（http://stackoverflow.com/help/mcve），而不是在未來的鏈接。謝謝。 – icedwater 2015-04-06 01:34:32

@icedwater - 我在這裏直接在我已經提供的Bootply鏈接旁邊添加了我的代碼。現在好嗎？謝謝。 – raulbaros 2015-04-06 11:30:23

I'have更新你的CSS。

/* CSS used here will be applied after bootstrap.css */ 
.carousel-indicators li { visibility: hidden; } 

.carousel-inner .item { 
    font-size:10px; 
    color:#0404B4 
    } 

.carousel-control { 
    z-index: 10; 
    top: 2%; 
    width: 30px; // no more gray thing 
    font-family: 'Helvetica Neue', Arial, sans-serif; 
} 
.carousel-control.left, 
.carousel-control.right { background: none } 
// change it according to your needs 
.carousel-control.left { left: -10px; } 
.carousel-control.right { right: -10px; }

Demo

來源

2015-04-06 11:39:15 agriboz

回答

相關問題