Bootstrap轮播溢出:隐藏的中断下拉按钮 [英] Bootstrap Carousel Overflow:Hidden Breaks Dropup Button
本文介绍了Bootstrap轮播溢出:隐藏的中断下拉按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在Twitter Bootstrap中，.carousel-inner样式预设为:
With Twitter Bootstrap, the .carousel-inner style is preset as:
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
，使得overflow: hidden;导致右侧的下拉按钮被切断:
such that overflow: hidden; causes a dropup button to be cut-off on the right-side:
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>
在 (而不是on)(slide)事件之前，是否有一种JavaScript方法可以更改 className?
Is there a javascript way to change the className before (instead of on) the slide event?
在尝试下面的代码时，该按钮是固定的，但是会导致每张幻灯片的内容在幻灯片过渡期间溢出..
In trying the following code, the button is fixed, but it causes the content of each slide to overflow during the slide transition..
<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 ..
..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>
在固定按钮的同时保持适当的幻灯片动画的任何解决方案，将不胜感激.
ANY SOLUTION for maintaining the proper slide animation, while fixing the button, would be greatly appreciated..
谢谢
万事如意
推荐答案
您可以将' pull-right '类添加到正在获取的'dropup'菜单中，而不是复杂的jQuery解决方案.剪切，以便它们与下拉按钮的右侧对齐.
Instead of a complicated jQuery solution, you could add the 'pull-right' class to the 'dropup' menus that are getting cut-off so that they align to the right side of the drop-up button.
例如，这是布朗尼"下拉菜单:
For example here is the 'Brownies' drop-up:
<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>
这篇关于Bootstrap轮播溢出:隐藏的中断下拉按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
