1. 首頁
  2. 問答
  3. Bootstrap旋轉木馬溢出：隱藏的間歇Dropup按鈕

Bootstrap旋轉木馬溢出：隱藏的間歇Dropup按鈕

2013-05-08 82 views
1

隨着Twitter Bootstrap，。 carousel-inner風格預設爲：Bootstrap旋轉木馬溢出：隱藏的間歇Dropup按鈕

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

這樣overflow: hidden;導致dropup按鈕被切斷的右側：

http://imageshack.us/photo/my-images/197/dropup.png/

<div class="btn-group dropup"> 
    <button class="btn">Cart</button> 
    <button class="btn dropdown-toggle" data-toggle="dropdown"> 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
    <li><a href="#">Baker's Dozen (13)</a></li> 
    <li><a href="#">Two Dozen (24)</a></li> 
    <li><a href="#">Three Dozen (36)</a></li> 
    <li><a href="#">Four Dozen (48)</a></li> 
    <li><a href="#">Five Dozen (60)</a></li> 
    </ul> 
</div>

是否有一個JavaScript的方式更改等級之前（而不是on）slide事件？

在試圖將下面的代碼，該按鈕是固定的，但它會導致滑動轉變期間每個滑動到溢出的內容..

<script language="javascript"> 

$('.carousel.slide').on('slide', function() { 
// change overflow to hidden, by changing class 
document.getElementById('carousel-inner').className = 'carousel-inner-fire'; 
}) 

$('.carousel.slide').on('slid', function() { 
// change overflow to visible, by changing class back 
document.getElementById('carousel-inner-fire').className = 'carousel-inner'; 
}) 

</script>

..where ..

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

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

還試圖..

function changeClass() { 
     // change overflow to visible, by changing class 
    document.getElementById("carousel-inner").className = "carousel-inner-visible"; 
} 

window.onload = function() { 
    document.getElementById("visible").addEventListener('click' , changeClass); 
} 

$.fn['unclick'] = function(){ 
    return this.unbind('click'); 
}; 

function changeClassback() { 
     // change overflow to hidden, by changing class back 
    document.getElementById("carousel-inner-visible").className = "carousel-inner"; 
} 

window.onload = function() { 
    document.getElementById("visible").addEventListener('unclick' , changeClassback); 
} 


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

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


<button class="btn dropdown-toggle" data-toggle="dropdown" id="visible"> 
<span class="caret"></span> 
</button>

旋轉木馬HTML：

<!-- Begin page content --> 
    <div class="container"> 
    <div class="page-header"> 
     <h1>Header/h1> 
    </div> 
    <div id="myCarousel" class="carousel slide"> 
     <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
     <li data-target="#myCarousel" data-slide-to="4"></li> 
     </ol> 
     <!-- Carousel items --> 
     <div class="carousel-inner"> 
     <div class="active item"> <!-- Item 1-3 --> 
      <div class="row-fluid"> 
      <ul class="thumbnails"> 
       <li class="span4"> <!-- Item 1 --> 
       <div class="thumbnail"> 
        <a href="#ccCookiesModal" data-toggle="modal"> 
        <img alt="300x200" src="img/chocolate_chip_cookies_thumb.jpeg" style="width: 300px; height: 200px;"></img> 
        </a> 
        <div class="caption"> 
        <h3>Cookies</h3> 
        <p>Chocolate Chip</p> 
        <p> 
         <div class="btn-group dropup"> 
         <button class="btn btn-primary">Buy</button> 
         <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
         <span class="caret"></span> 
         </button> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Baker's Dozen (13) &middot; $13</a></li> 
          <li><a href="#">Two Dozen (24) &middot; $24</a></li> 
          <li><a href="#">Three Dozen (36) &middot; $36</a></li> 
          <li><a href="#">Four Dozen (48) &middot; $48</a></li> 
          <li><a href="#">Five Dozen (60) &middot; $60</a></li> 
         </ul> 
         </div> 
         <div class="btn-group dropup"> 
         <button class="btn">Cart</button> 
         <button class="btn dropdown-toggle" data-toggle="dropdown"> 
         <span class="caret"></span> 
         </button> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Baker's Dozen (13) &middot; $13</a></li> 
          <li><a href="#">Two Dozen (24) &middot; $24</a></li> 
          <li><a href="#">Three Dozen (36) &middot; $36</a></li> 
          <li><a href="#">Four Dozen (48) &middot; $48</a></li> 
          <li><a href="#">Five Dozen (60) &middot; $60</a></li> 
         </ul> 
         </div> 
        </p> 
        </div> 
       </div> 
       </li> 
       <li class="span4"> <!-- Item 2 --> 
       <div class="thumbnail"> 
        <a href="#BlueberryMuffinsModal" data-toggle="modal"> 
        <img alt="300x200" src="img/blueberry_muffins_thumb.jpeg" style="width: 300px; height: 200px;"></img> 
        </a> 
        <div class="caption"> 
        <h3>Muffins</h3> 
        <p>Blueberry<p> 
        <p> 
         <div class="btn-group dropup"> 
         <button class="btn btn-primary">Buy</button> 
         <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
         <span class="caret"></span> 
         </button> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Baker's Dozen (13) &middot; $52</a></li> 
          <li><a href="#">Two Dozen (24) &middot; $96</a></li> 
          <li><a href="#">Three Dozen (36) &middot; $144</a></li> 
          <li><a href="#">Four Dozen (48) &middot; $192</a></li> 
          <li><a href="#">Five Dozen (60) &middot; $240</a></li> 
         </ul> 
         </div> 
         <div class="btn-group dropup"> 
         <button class="btn">Cart</button> 
         <button class="btn dropdown-toggle" data-toggle="dropdown"> 
         <span class="caret"></span> 
         </button> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Baker's Dozen (13) &middot; $52</a></li> 
          <li><a href="#">Two Dozen (24) &middot; $96</a></li> 
          <li><a href="#">Three Dozen (36) &middot; $144</a></li> 
          <li><a href="#">Four Dozen (48) &middot; $192</a></li> 
          <li><a href="#">Five Dozen (60) &middot; $240</a></li> 
         </ul> 
         </div> 
        </p> 
        </div> 
       </div> 
       </li> 
       <li class="span4"> <!-- Item 3 --> 
       <div class="thumbnail"> 
        <a href="#ChocolateBrowniesModal" data-toggle="modal"> 
        <img alt="300x200" src="img/brownies_thumb.jpeg" style="width: 300px; height: 200px;"></img> 
        </a> 
        <div class="caption"> 
        <h3>Brownies</h3> 
        <p>Medium Chocolate</p> 
        <p> 
         <div class="btn-group dropup"> 
         <button class="btn btn-primary">Buy</button> 
         <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
         <span class="caret"></span> 
         </button> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Baker's Dozen (13) &middot; $39</a></li> 
          <li><a href="#">Two Dozen (24) &middot; $72</a></li> 
          <li><a href="#">Three Dozen (36) &middot; $108</a></li> 
          <li><a href="#">Four Dozen (48) &middot; $144</a></li> 
          <li><a href="#">Five Dozen (60) &middot; $180</a></li> 
         </ul> 
         </div> 
         <div class="btn-group dropup"> 
         <button class="btn">Cart</button> 
         <button class="btn dropdown-toggle" data-toggle="dropdown" id="visible"> 
         <span class="caret"></span> 
         </button> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Baker's Dozen (13) &middot; $39</a></li> 
          <li><a href="#">Two Dozen (24) &middot; $72</a></li> 
          <li><a href="#">Three Dozen (36) &middot; $108</a></li> 
          <li><a href="#">Four Dozen (48) &middot; $144</a></li> 
          <li><a href="#">Five Dozen (60) &middot; $180</a></li> 
         </ul> 
         </div> 
        </p> 
        </div> 
       </div> 
       </li> 
      </div> 
     </div> 
     <div class="item"> <!-- Items 4-6 --> 
      <div class="row-fluid"> 
      <ul class="thumbnails"> 
       <li class="span4"> <!-- Item 4 --> 
       <div class="thumbnail"> 
        <a href="#BananaBreadModal" data-toggle="modal"> 
        <img alt="300x200" src="img/banana_bread_thumb.jpeg" style="width: 300px; height: 200px;"></img> 
        </a> 
        <div class="caption"> 
        <h3>Banana Bread</h3> 
        <p>With Chocolate Chips</p> 
        <p> 
         <div class="btn-group dropup"> 
         <button class="btn btn-primary">Buy</button> 
         <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
         <span class="caret"></span> 
         </button> 
         <ul class="dropdown-menu"> 
          <li><a href="#">One Loaf (1) &middot; $20</a></li> 
          <li><a href="#">Two Loaves (2) &middot; $40</a></li> 
          <li><a href="#">Three Loaves (3) &middot; $60</a></li> 
          <li><a href="#">Four Loaves (4) &middot; $80</a></li> 
          <li><a href="#">Five Loaves (5) &middot; $100</a></li> 
         </ul> 
         </div> 
         <div class="btn-group dropup"> 
         <button class="btn">Cart</button> 
         <button class="btn dropdown-toggle" data-toggle="dropdown"> 
         <span class="caret"></span> 
         </button> 
         <ul class="dropdown-menu"> 
          <li><a href="#">One Loaf (1) &middot; $20</a></li> 
          <li><a href="#">Two Loaves (2) &middot; $40</a></li> 
          <li><a href="#">Three Loaves (3) &middot; $60</a></li> 
          <li><a href="#">Four Loaves (4) &middot; $80</a></li> 
          <li><a href="#">Five Loaves (5) &middot; $80</a></li> 
         </ul> 
         </div> 
        </p> 
        </div> 
       </div> 
       </li> 
       <li class="span4"> <!-- Item 5 --> 
       <div class="thumbnail"> 
        <a href="#RiceCrispiesModal" data-toggle="modal"> 
        <img alt="300x200" src="img/rice_crispies_thumb.jpeg" style="width: 300px; height: 200px;"></img> 
        </a> 
        <div class="caption"> 
        <h3>Rice Crispies</h3> 
        <p>Marshmallow<p> 
        <p> 
         <div class="btn-group dropup"> 
         <button class="btn btn-primary">Buy</button> 
         <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
         <span class="caret"></span> 
         </button> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Baker's Dozen (13) &middot; $26</a></li> 
          <li><a href="#">Two Dozen (24) &middot; $48</a></li> 
          <li><a href="#">Three Dozen (36) &middot; $72</a></li> 
          <li><a href="#">Four Dozen (48) &middot; $96</a></li> 
          <li><a href="#">Five Dozen (60) &middot; $120</a></li> 
         </ul> 
         </div> 
         <div class="btn-group dropup"> 
         <button class="btn">Cart</button> 
         <button class="btn dropdown-toggle" data-toggle="dropdown"> 
         <span class="caret"></span> 
         </button> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Baker's Dozen (13) &middot; $26</a></li> 
          <li><a href="#">Two Dozen (24) &middot; $48</a></li> 
          <li><a href="#">Three Dozen (36) &middot; $72</a></li> 
          <li><a href="#">Four Dozen (48) &middot; $96</a></li> 
          <li><a href="#">Five Dozen (60) &middot; $120</a></li> 
         </ul> 
         </div> 
        </p> 
        </div> 
       </div> 
       </li> 
       <li class="span4"> <!-- Item 6 --> 
       <div class="thumbnail"> 
        <a href="#OatmealRaisinCookiesModal" data-toggle="modal"> 
        <img alt="300x200" src="img/oatmeal_raisin_cookies_thumb.jpeg" style="width: 300px; height: 200px;"></img> 
        </a> 
        <div class="caption"> 
        <h3>Oatmeal Cookies</h3> 
        <p>With Raisins</p> 
        <p> 
         <div class="btn-group dropup"> 
         <button class="btn btn-primary">Buy</button> 
         <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
         <span class="caret"></span> 
         </button> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Baker's Dozen (13) &middot; $13</a></li> 
          <li><a href="#">Two Dozen (24) &middot; $24</a></li> 
          <li><a href="#">Three Dozen (36) &middot; $36</a></li> 
          <li><a href="#">Four Dozen (48) &middot; $48</a></li> 
          <li><a href="#">Five Dozen (60) &middot; $60</a></li> 
         </ul> 
         </div> 
         <div class="btn-group dropup"> 
         <button class="btn">Cart</button> 
         <button class="btn dropdown-toggle" data-toggle="dropdown"> 
         <span class="caret"></span> 
         </button> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Baker's Dozen (13) &middot; $13</a></li> 
          <li><a href="#">Two Dozen (24) &middot; $24</a></li> 
          <li><a href="#">Three Dozen (36) &middot; $36</a></li> 
          <li><a href="#">Four Dozen (48) &middot; $48</a></li> 
          <li><a href="#">Five Dozen (60) &middot; $60</a></li> 
         </ul> 
         </div> 
        </p> 
        </div> 
       </div> 
       </li> 
      </div> 
     </div> 
     </div> 
    </div>

爲保持適當的幻燈片動畫，同時固定按鈕，將不勝感激的任何解決方案..

感謝

一切順利

來源

2013-05-08 sourcingsynergy

+0

你能後的轉盤HTML代碼嗎？ – ZimSystem 2013-05-12 08:47:50

+0

剛剛添加..感謝您的參觀..是github分享大型代碼片段的最佳方式？ – sourcingsynergy 2013-05-12 09:01:09

+0

我會使用http://bootply.com，那麼你可以分享鏈接併發布你的部分代碼。 – ZimSystem 2013-05-12 09:31:24

回答

0

而是一個複雜的jQuery的解決方案，你可以將'拉右'類添加到正在截斷的'dropup'菜單中，以便它們對齊到下拉按鈕的右側。

例如這裏是 '布朗尼' 下拉了起來：

<div class="btn-group dropup"> 
     <button class="btn">Cart</button> 
     <button class="btn dropdown-toggle" data-toggle="dropdown" id="visible"> 
     <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu pull-right"> 
      <li><a href="#">Baker's Dozen (13) · $39</a></li> 
      <li><a href="#">Two Dozen (24) · $72</a></li> 
      <li><a href="#">Three Dozen (36) · $108</a></li> 
      <li><a href="#">Four Dozen (48) · $144</a></li> 
      <li><a href="#">Five Dozen (60) · $180</a></li> 
     </ul> 
</div>

Working Demo on Bootply

來源

2013-05-12 09:30:28 ZimSystem

相關問題

 相關問題