ブートストラップのドロップダウン：テキストをうまくラップする方法

Question

私はブートストラップを学んでいます。

<div class="btn-group"> 
    <a class="btn dropdown-toggle btn-mini" data-toggle="dropdown" href="#"> 
    Action 
    <span class="caret"></span> 
    </a> 
    <div class="dropdown-menu" style="width: 300px;"> 
    <div > 

    Long text goes here. 

    </div> 
    </div> 
</div> 

代わりにドロップダウンメニューで、私は長いテキストやその他のHTMLタグを<div>を持っている：私は、次のようなドロップダウンとボタンを持っていると思います。問題は、異なるCSSルールを試して、長いテキストが<div>を超えて拡大するか、スクロールバーが表示されることです。私はちょうど長いテキストが<div>の中にうまく包み込み、テキストの量に応じて下がりたいと思う。

どうすればいいですか？

「ドロップダウンメニュー」コンポーネントを間違った方法で使用していますか？

Answer 1

がjust-メニューを.dropdownするためにそれを追加して、私のために働いたしませんでした作業。

.navbar .nav li .dropdown-menu li a {white-space: normal;} 

Answer 2

これはあなたの後ろのものに近いですか？
http://www.bootply.com/69776

私はHTMLをわずかに変更し、ドロップダウンの幅を制限するCSSクラスを追加しました。 HTMLはthe bootstrap siteから直接取得され、ボタン用の2つのクラスが追加されています。

HTML

<div class="dropdown"> 
<a class="btn btn-min dropdown-toggle" data-toggle="dropdown" href="#"> Action 
<span class="caret"></span></a> 
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 

Loremのイプサムの嘆き、AMET consecteturのadipiscingのELIT座ります。 Vestibulumは完全ではありません。ユート・タイム・グラビダ・レオ。 Tellus justoのSed。 Nam vel nisl nulla。 Proven sagittis semper nunc et vehicula。プロムラム・ラッカース、フィギア・キス・ディアム、マレアダダ・ポアード・オディオ。整数の植物が存在する。 Nullam a dapibus leo、vitae gravida ligula。 Praesent consectetur lorem et pellentesque imperdiet。サスペンス・バイエル・リベロ・オーク、ファレラ・ヌンク・ユー、ロレー・デュイ。胸部大動脈瘤、大動脈解離瘤Nullam eget orci et mauris lacinia sollicitudin non vel felis。 Praesent eleifend risusとlibero ultries facilisisがあります。

CSS

.dropdown-menu{ 
max-width:300px; 
} 

は、この情報がお役に立てば幸い！ただ、.dropdownメニュー内のアンカータグに通常のホワイトスペースを追加し、あなたの.dropdown-menu

Example fiddle

Answer 3

にwhite-space: normal;を追加