Bootstrap Carousel溢出：隐藏中断下拉按钮

Question

使用Twitter Bootstrap，。carousel-inner样式预设为：

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

这样overflow: hidden;会导致右侧的关闭按钮被切断：

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方式更改 className 之前（而不是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

您可以将' pull-right '类添加到'dropup'菜单中，而不是复杂的jQuery解决方案，这些菜单会被切断，以便它们与drop的右侧对齐 - 按钮。

例如，这里是'布朗尼'的下拉：

<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