Bootstrap旋轉木馬指示器位置

Question

我有bootstrap旋轉木馬文字滑塊，我有問題的指標，因爲如果文字大或小，我的指標沒有固定的位置。 我試圖設置輪播類的有限高度，這隻適用於電腦，但不能在移動設備上響應，我刪除了高度。

http://codepen.io/anon/pen/MwGLJd

HTML

<div class="about mainContainer"> 
    <div class="row"> 
     <div class="col-sm-offset-2 col-sm-8"> 
      <h2 class="fontraleway">WHO WE ARE?</h2> 
      <div id="locations" class="carousel slide" data-ride="carousel"> 
        <ol class="carousel-indicators"> 
         <li data-target="#locations" data-slide-to="0" class="active"></li> 
         <li data-target="#locations" data-slide-to="1"></li> 
         <li data-target="#locations" data-slide-to="2"></li> 
         <li data-target="#locations" data-slide-to="3"></li> 
        </ol> 

        <div class="carousel-inner"> 
         <div class="item active"> 
          <center> 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis rhoncus finibus. Donec tempor mi massa, a sollicitudin diam semper ut. Nam pulvinar nisi nisi, vitae rhoncus purus rhoncus id. Nam ac augue sed erat consequat efficitur. Integer aliquet elit et velit porttitor, eget blandit arcu venenatis. Donec fringilla urna purus, sit amet malesuada est dignissim mattis. Donec cursus, quam vel luctus blandit, dui sapien interdum sapien, vitae ultrices arcu leo et augue. Vestibulum fermentum nulla augue, in ultrices risus rutrum a. Suspendisse sed porttitor tellus. Ut vitae vulputate sapien, a facilisis quam. 
          </center> 
         </div> 

         <div class="item"> 
          <center> 
           Ut eu iaculis arcu. Cras pretium lacus eget mi mattis sollicitudin. Vivamus posuere vehicula mi eu condimentum. Donec eros dolor, sagittis quis arcu non, pulvinar euismod turpis. Suspendisse accumsan sodales massa, eget pretium nunc rhoncus a. Fusce a magna sit amet odio ullamcorper dapibus nec quis nulla. Curabitur enim risus, convallis at felis non, consectetur efficitur risus. Class aptent taciti eptos himenaeos. Nulla facilisi. Aliquam posuere feugiat risus, non mollis nunc iaculis nec. Praesent non tellus rhoncus 
          </center> 
         </div> 

         <div class="item"> 
          <center> 
           Sed eget luctus leo, eu sagittis felis. Vestibulum et tellus sed neque gravida pretium vel pellentesque tellus. Nullam in dolor magna. Donec in mauris eget nisl volutpat ornare a ut dolor. Vestibulum sit amet felis et purus sagittis interdum. Quisque quis nisi neque. In viverra lobortis ex in auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut at nulla augue. Duis et congue erat. Maecenas odio justo, finibus at nulla at, luctus elementum eros. Quisque eget nisl felis. Phasellus tempus imperdiet dui condimentum bibendum. Sed a turpis quis diam ullamcorper interdum in at lectus 
          </center> 
         </div> 

         <div class="item"> 
          <center> 
           Ut eu iaculis arcu. Cras pretium lacus eget mi mattis sollicitudin. Vivamus posuere vehicula mi eu condimentum. Donec eros dolor, sagittis quis arcu non, pulvinar euismod turpis. Suspendisse accumsan sodales massa, eget pretium nunc rhoncus a. Fusce a magna sit amet odio ullamcorper dapibus nec quis nulla. Curabitur enim risus, convallis at felis non, consectetur efficitur risus. Class aptent taciti eptos himenaeos. Nulla facilisi. Aliquam posuere feugiat risus, non mollis nunc iaculis nec. Praesent non tellus rhoncus 
          </center> 
         </div> 
        </div> 
       </div> 
     </div> 
    </div><!--Closed div row--> 
</div><!--Closed div about--> 

CSS

.services h2{ 
margin-top: 97px; 
} 
.carousel-indicators li{ 
background-color: transparent; 
border:2px solid #dbdbdb; 
} 
.carousel-indicators .active{ 
background-color: #3eb8df; 
border:2px solid #3eb8df; 
} 
.carousel-indicators{ 
    bottom:-60px !important; 
} 
.carousel-indicators li{ 
    width:15px !important; 
    height:15px !important; 
} 

Answer 1

的carousel-inner元素，這將使該指標保持在同一位置上只需設置一個min-height。

這樣做，將它添加到你的CSS像這樣最簡單的方法：

.carousel-inner { 
    min-height: 120px; 
} 

但這個問題是，當窗口大小改變時，該項目的內部尺寸carousel-inner也會發生變化，它們的高度可能會超過120px。

好得多的是獲得最大高度的物品，然後動態添加min-height屬性。這裏有一個例子：

$(function() { 
 

 
    // Reference your carousel-inner and the items. 
 
    var $carouselnner = $(".carousel-inner"), 
 
     $carouselItems = $carouselnner.find('.item'); 
 

 
    // Handle window resize. 
 
    function resizeHandler() { 
 

 
    // Map over all items to get their height and assign it to minHeight. 
 
    var minHeight = $carouselItems.map(function() { 
 
     return $(this).height(); 
 
    }).get(); 
 

 
    // Now let's apply the biggest height as the value of min-height on carousel-inner. 
 
    $carouselnner.css('min-height', Math.max.apply(null, minHeight) + 10 + 'px'); 
 

 
    } 
 

 
    // Add a listener to window resize and trigger it immediately. 
 
    $(window).resize(resizeHandler).trigger('resize'); 
 

 
});

.services h2 { 
 
    margin-top: 97px; 
 
} 
 
.carousel-indicators li { 
 
    background-color: transparent; 
 
    border: 2px solid #dbdbdb !important; 
 
} 
 
.carousel-indicators .active { 
 
    background-color: #3eb8df !important; 
 
    border: 2px solid #3eb8df !important; 
 
} 
 
.carousel-indicators { 
 
    bottom: -60px !important; 
 
} 
 
.carousel-indicators li { 
 
    width: 15px !important; 
 
    height: 15px !important; 
 
} 
 

 
.carousel-inner { 
 
    min-height: 120px; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="about mainContainer"> 
 
    <div class="row"> 
 
    <div class="col-sm-offset-2 col-sm-8"> 
 
     <h2 class="fontraleway">WHO WE ARE?</h2> 
 
     <div id="locations" class="carousel slide" data-ride="carousel"> 
 
     <ol class="carousel-indicators"> 
 
      <li data-target="#locations" data-slide-to="0" class="active"></li> 
 
      <li data-target="#locations" data-slide-to="1"></li> 
 
      <li data-target="#locations" data-slide-to="2"></li> 
 
      <li data-target="#locations" data-slide-to="3"></li> 
 
     </ol> 
 

 
     <div class="carousel-inner"> 
 
      <div class="item active"> 
 
      <center> 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis rhoncus finibus. Donec tempor mi massa, a sollicitudin diam semper ut. Nam pulvinar nisi nisi, vitae rhoncus purus rhoncus id. Nam ac augue sed erat consequat efficitur. Integer aliquet elit et velit porttitor, eget blandit arcu venenatis. Donec fringilla urna purus, sit amet malesuada est dignissim mattis. Donec cursus, quam vel luctus blandit, dui sapien interdum sapien, vitae ultrices arcu leo et augue. Vestibulum fermentum nulla augue, in ultrices risus rutrum a. Suspendisse sed porttitor tellus. Ut vitae vulputate sapien, a facilisis quam. 
 
      </center> 
 
      </div> 
 

 
      <div class="item"> 
 
      <center> 
 
       Ut eu iaculis arcu. Cras pretium lacus eget mi mattis sollicitudin. Vivamus posuere vehicula mi eu condimentum. Donec eros dolor, sagittis quis arcu non, pulvinar euismod turpis. Suspendisse accumsan sodales massa, eget pretium nunc rhoncus a. Fusce a magna sit amet odio ullamcorper dapibus nec quis nulla. Curabitur enim risus, convallis at felis non, consectetur efficitur risus. Class aptent taciti eptos himenaeos. Nulla facilisi. Aliquam posuere feugiat risus, non mollis nunc iaculis nec. Praesent non tellus rhoncus 
 
      </center> 
 
      </div> 
 

 
      <div class="item"> 
 
      <center> 
 
       Sed eget luctus leo, eu sagittis felis. Vestibulum et tellus sed neque gravida pretium vel pellentesque tellus. Nullam in dolor magna. Donec in mauris eget nisl volutpat ornare a ut dolor. Vestibulum sit amet felis et purus sagittis interdum. Quisque quis nisi neque. In viverra lobortis ex in auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut at nulla augue. Duis et congue erat. Maecenas odio justo, finibus at nulla at, luctus elementum eros. Quisque eget nisl felis. Phasellus tempus imperdiet dui condimentum bibendum. Sed a turpis quis diam ullamcorper interdum in at lectus 
 
      </center> 
 
      </div> 
 

 
      <div class="item"> 
 
      <center> 
 
       Ut eu iaculis arcu. Cras pretium lacus eget mi mattis sollicitudin. Vivamus posuere vehicula mi eu condimentum. Donec eros dolor, sagittis quis arcu non, pulvinar euismod turpis. Suspendisse accumsan sodales massa, eget pretium nunc rhoncus a. Fusce a magna sit amet odio ullamcorper dapibus nec quis nulla. Curabitur enim risus, convallis at felis non, consectetur efficitur risus. Class aptent taciti eptos himenaeos. Nulla facilisi. Aliquam posuere feugiat risus, non mollis nunc iaculis nec. Praesent non tellus rhoncus 
 
      </center> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div><!--Closed div row--> 
 
</div><!--Closed div about-->