引导旋转木马溢出：隐藏休息Dropup按钮(Bootstrap Carousel Overflow:

随着Twitter的引导，对。 carousel-inner风格被预设为：

.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>

..哪里..

.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>

为保持适当的滑动动画，同时固定按钮的任何溶液，将不胜感激..

谢谢

祝一切顺利

Answer 1:

而是一个复杂的jQuery的解决方案，你可以在“ 右拉 ”类添加到让他们对齐到dropup按钮的右侧是越来越切断了“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>

工作演示上Bootply

文章来源: Bootstrap Carousel Overflow:Hidden Breaks Dropup Button