隱藏Bootstrap CSS溢出的問題

您可以看看This Demo，並讓我知道爲什麼css overflow:hidden規則不適用於.switch類？請注意，我不想改變按鈕的任何東西，切換加價，並需要保持他們，因爲他們是（不得更改col-lg-x大小）隱藏Bootstrap CSS溢出的問題

<div class="panel panel-default"> 
    <div class="panel-heading">Switch</div> 
    <div class="panel-body"> 
     <div class="row"> 
      <div class="switch col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-10 col-md-10 col-sm-10 col-xs-10"> 
       <button class="btn btn-primary norightradius col-lg-1 col-md-1 col-sm-1 col-xs-1">Yes</button> 
       <button class="btn btn-primary noradius col-lg-11 col-md-11 col-sm-11 col-xs-11">New Model</button> 
       <button class="btn btn-primary noleftradius col-lg-1 col-md-1 col-sm-1 col-xs-1">No</button> 
      </div> 
     </div> 
    </div> 
</div>

下面是需要的結果的一個鏡頭

enter image description here

來源

2014-06-24 Suffii

我刪除了我的答案，因爲它可能不適用於您的解釋，但也許如果您更新問題並找到您期望的結果的示例或屏幕截圖，將有所幫助。 – Dan

好的丹謝謝任何方式，我更新了結果的屏幕截圖的問題 – Suffii

引導程序網格系統是基於12列。如果您將「是」按鈕，標題欄和「否」按鈕消耗的列相加，則會看到您有13列。

只是調整標題欄爲10列而不是11

變化

<button class="btn btn-primary noradius col-lg-11 col-md-11 col-sm-11 col-xs-11">New Model</button>

要

<button class="btn btn-primary noradius col-lg-10 col-md-10 col-sm-10 col-xs-10">New Model</button>

見http://jsfiddle.net/wilsonjonash/Fz4CW/6/

如果你'd喜歡將按鈕隱藏在某些屏幕尺寸下，請嘗試使用響應式實用程序類（例如hidden-sm或hidden-xs）：http://getbootstrap.com/css/#responsive-utilities

哦，它爲什麼包裹？自舉網格類使用float:left來排列網格項。 overflow:hidden只有含有浮動的效果，而不是隱藏它們。

來源

2014-06-24 23:02:19

謝謝喬納森，我猜隱藏的技巧可以幫助我解決這個問題 – Suffii

隱藏Bootstrap CSS溢出的問題

回答

相關問題