bootstrapドロップダウンアイテムリストをclass = "well"の外側に表示する方法

Question

この問題はこの問題に起因しています。 Dynamic width of a bootstrap 3 button to stay in col-md-* with long label on button

これは問題の例です。これを解決するために

http://codepen.io/anon/pen/ORJagG

HTML

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-md-1"> 
     <div class="well well-lg"> 
      <div class="btn-group"> 
       <button type="button" class="btn btn-default dropdown-toggle hideOverflow" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       This is some really really really really really really test really really really long text<span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu"> 
        <li><a href="#">some button with really long text</a></li> 
        <li><a href="#">some button with really long text</a></li> 
        <li><a href="#">some button with really long text</a></li> 
        <li><a href="#">some button with really long text</a></li> 

       </ul> 
      </div> 
      </div> 
     </div> 
    <div class="col-md-1"> 
       <div class="well"> 
    <div class="btn-group"> 
       <button type="button" class="btn btn-default dropdown-toggle hideOverflow" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       This is some really really really really really really test really really really long text<span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Should work like this but in the well...</a></li> 
        <li><a href="#">some button with really long text</a></li> 
        <li><a href="#">some button with really long text</a></li> 
        <li><a href="#">some button with really long text</a></li> 
       </ul> 
     </div> 
     </div> 
    </div> 
</div> 

.hideOverflow 
{ 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis; 
    width:100%; 
    display:block; 
} 

.btn-group{ 
    display:block; 
} 

.well-lg{ 
    overflow:hidden; 
} 

Answer 1

あなたは.wellにmin-heightを調整し、.well-lgにoverflowを削除することができ

を（それが将来的に誰かを助けるかもしれ場合には答えとしてコメントを追加します）。

Answer 2

、その主なdiv要素の側面をあなたのコンテンツを外に移動する必要があります。

子要素は、継承によって明示的なCSSプロパティを受け取ることに注意してください。

このサンプルコードを確認すると、展開されたdivはchildren要素ではなくボタンに関連しています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<br><br><br><br> 
 
<br><br><br><br> 
 
<div class="dropup"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
    Dropup 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu2"> 
 
    <li><a href="#">Action</a> 
 
    </li> 
 
    <li><a href="#">Another action</a> 
 
    </li> 
 
    <li><a href="#">Something else here</a> 
 
    </li> 
 
    <li role="separator" class="divider"></li> 
 
    <li><a href="#">Separated link</a> 
 
    </li> 
 
    </ul> 
 
</div>