Bootstrap傳送帶控件位置不正確

使用Bootstrap 3與fontawesome控件上的圖標：除了圖標位於傳送帶的頂部而不是居中位置外，一切看起來都正常。Bootstrap傳送帶控件位置不正確

<div class="row" id="landing"> 
      <div class="col-md-12"> 
       <div class="carousel slide" id="welcome-carousel" data-ride="carousel"> 
        <!-- Indicators --> 
        <ol class="carousel-indicators"> 
         <li data-target="#welcome-carousel" data-slide-to="0"></li> 
         <li data-target="#welcome-carousel" data-slide-to="1"></li> 
         <li data-target="#welcome-carousel" data-slide-to="2"></li> 
        </ol> 

        <!-- Slides --> 
        <div class="carousel-inner"> 
         <div class="item active"> 
          <img src="assets/images/WelcomeImage0.png" alt="" > 
          <div class="carousel-caption"> 
           <h3>Blooh Blah Bleeh</h3> 
           <p>Important bizness talk</p> 
          </div><!-- end caption --> 
         </div><!-- end item --> 
        </div><!-- end carousel-inner slides --> 

        <!-- Controls --> 
        <a href="#welcome-carousel" class="left carousel-control" data-slide="prev"> 
         <span class="fa-stack fa-lg"> 
          <i class="fa fa-square-o fa-stack-2x"></i> 
          <i class="fa fa-angle-left fa-stack-1x"></i> 
         </span> 
        </a><!-- end left control --> 
        <a href="#welcome-carousel" class="right carousel-control" data-slide="next"> 
         <span class="fa-stack fa-lg"> 
          <i class="fa fa-square-o fa-stack-2x"></i> 
          <i class="fa fa-angle-right fa-stack-1x"></i> 
         </span> 
        </a> <!-- end right control --> 
       </div><!-- end carousel --> 
      </div><!-- end col-md-12 --> 
     </div><!-- end landing row -->

我生成使用凹槽此.LESS文件中的CSS：

@import "../bootstrap/less/bootstrap.less"; 

@brand-primary: #ee594e; 
@grid-gutter-width: 0; 

body { padding-top: 70px; } 

//make the carousel full-width 
.carousel-inner,.carousel,.item,.container,.fill { 
    height:100%; 
    width:100%; 
}

我包括此僅爲完整性，因爲註釋掉一切，但首次進口不會改變圖標的位置。以類似的方式，控制檯中沒有加載錯誤或任何內容。我感謝幫助！

來源

2013-12-13 Ben

向.controls類中添加padding指令可以很好地解決這個問題，但我很想知道是否有更優雅/可接受的解決方法。就像在我一樣，我做錯了什麼？

來源

2013-12-16 00:15:59 Ben

在HTML中添加控制左，控制權在您的跨度類

<a href="#welcome-carousel" class="left carousel-control" data-slide="prev"> 
        <span class="control-left fa-stack fa-lg"> 
         <i class="fa fa-square-o fa-stack-2x"></i> 
         <i class="fa fa-angle-left fa-stack-1x"></i> 
        </span> 
       </a><!-- end left control --> 
       <a href="#welcome-carousel" class="right carousel-control" data-slide="next"> 
        <span class="control-right fa-stack fa-lg"> 
         <i class="fa fa-square-o fa-stack-2x"></i> 
         <i class="fa fa-angle-right fa-stack-1x"></i> 
        </span> 
       </a> <!-- end right control -->

而在你的CSS佈局文件

.carousel-control .control-left, 
.carousel-control .control-right { 
    position: absolute; 
    top: 50%; 
    z-index: 5; 
    display: inline-block; 
} 
.carousel-control .control-left { 
    left: 50%; 
} 
.carousel-control .control-right { 
    right: 50%; 
}

來源

2014-01-23 08:09:29 user3203140

使用.icon-prev和.icon-next類和圖標會垂直居中。

<!-- Controls --> 
<a href="#welcome-carousel" class="left carousel-control" data-slide="prev"> 
    <span class="icon-prev fa-stack fa-lg"> 
     <i class="fa fa-square-o fa-stack-2x"></i> 
     <i class="fa fa-angle-left fa-stack-1x"></i> 
    </span> 
</a><!-- end left control --> 
<a href="#welcome-carousel" class="right carousel-control" data-slide="next"> 
    <span class="icon-next fa-stack fa-lg"> 
     <i class="fa fa-square-o fa-stack-2x"></i> 
     <i class="fa fa-angle-right fa-stack-1x"></i> 
    </span> 
</a>

來源

2014-02-28 16:27:58

這是工作於傳送帶控制器與字體真棒

<!-- Controls --> 
         <a class="left carousel-control" href="#carousel_id" role="button" data-slide="prev"> 
          <span class="icon-prev fa-stack fa-lg"></span> 
         </a> 
         <a class="right carousel-control" href="#carousel_id" role="button" data-slide="next"> 
          <span class="icon-next fa-stack fa-lg"></span> 
         </a>

來源

2015-05-02 08:08:29 Harsha

Bootstrap傳送帶控件位置不正確

回答

相關問題