Bootstrap旋转木马溢出：隐藏的间歇Dropup按钮
问题描述：
随着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) · $13</a></li>
<li><a href="#">Two Dozen (24) · $24</a></li>
<li><a href="#">Three Dozen (36) · $36</a></li>
<li><a href="#">Four Dozen (48) · $48</a></li>
<li><a href="#">Five Dozen (60) · $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) · $13</a></li>
<li><a href="#">Two Dozen (24) · $24</a></li>
<li><a href="#">Three Dozen (36) · $36</a></li>
<li><a href="#">Four Dozen (48) · $48</a></li>
<li><a href="#">Five Dozen (60) · $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) · $52</a></li>
<li><a href="#">Two Dozen (24) · $96</a></li>
<li><a href="#">Three Dozen (36) · $144</a></li>
<li><a href="#">Four Dozen (48) · $192</a></li>
<li><a href="#">Five Dozen (60) · $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) · $52</a></li>
<li><a href="#">Two Dozen (24) · $96</a></li>
<li><a href="#">Three Dozen (36) · $144</a></li>
<li><a href="#">Four Dozen (48) · $192</a></li>
<li><a href="#">Five Dozen (60) · $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) · $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>
<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) · $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>
</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) · $20</a></li>
<li><a href="#">Two Loaves (2) · $40</a></li>
<li><a href="#">Three Loaves (3) · $60</a></li>
<li><a href="#">Four Loaves (4) · $80</a></li>
<li><a href="#">Five Loaves (5) · $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) · $20</a></li>
<li><a href="#">Two Loaves (2) · $40</a></li>
<li><a href="#">Three Loaves (3) · $60</a></li>
<li><a href="#">Four Loaves (4) · $80</a></li>
<li><a href="#">Five Loaves (5) · $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) · $26</a></li>
<li><a href="#">Two Dozen (24) · $48</a></li>
<li><a href="#">Three Dozen (36) · $72</a></li>
<li><a href="#">Four Dozen (48) · $96</a></li>
<li><a href="#">Five Dozen (60) · $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) · $26</a></li>
<li><a href="#">Two Dozen (24) · $48</a></li>
<li><a href="#">Three Dozen (36) · $72</a></li>
<li><a href="#">Four Dozen (48) · $96</a></li>
<li><a href="#">Five Dozen (60) · $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) · $13</a></li>
<li><a href="#">Two Dozen (24) · $24</a></li>
<li><a href="#">Three Dozen (36) · $36</a></li>
<li><a href="#">Four Dozen (48) · $48</a></li>
<li><a href="#">Five Dozen (60) · $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) · $13</a></li>
<li><a href="#">Two Dozen (24) · $24</a></li>
<li><a href="#">Three Dozen (36) · $36</a></li>
<li><a href="#">Four Dozen (48) · $48</a></li>
<li><a href="#">Five Dozen (60) · $60</a></li>
</ul>
</div>
</p>
</div>
</div>
</li>
</div>
</div>
</div>
</div>
为保持适当的幻灯片动画，同时固定按钮，将不胜感激的任何解决方案..
感谢
一切顺利
答
而是一个复杂的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>
你能后的转盘HTML代码吗？ – ZimSystem 2013-05-12 08:47:50
刚刚添加..感谢您的参观..是github分享大型代码片段的最佳方式？ – sourcingsynergy 2013-05-12 09:01:09
我会使用http://bootply.com，那么你可以分享链接并发布你的部分代码。 – ZimSystem 2013-05-12 09:31:24