2013-07-26 32 views
6

Uczę się Bootstrapa. Chciałbym mieć przycisk z rozwijanej takie jak:Lista rozwijana Bootstrap: jak ładnie napisać tekst

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

Zamiast rozwijanego menu, mam <div> z długiego tekstu i innych znaczników HTML. Problem polega na tym, że próbowałem różnych reguł CSS, a długi tekst wykracza poza zakres <div> lub powoduje pojawienie się pasków przewijania. Chcę tylko ładnie zapakować długi tekst w obrębie <div> i obniżyć w zależności od ilości tekstu.

Jak mogę to zrobić?

Czy używam składnika "menu rozwijanego" w niewłaściwy sposób?

Odpowiedz

1

Czy zbliża się to, do czego dążysz?
http://www.bootply.com/69776

Zobaczysz, że nieznacznie zmieniłem HTML i dodałem klasę CSS, aby ograniczyć szerokość listy rozwijanej. Kod HTML jest pobierany bezpośrednio z the bootstrap site z kilkoma dodatkowymi klasami dla przycisku.

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 ipsum dolor sit amet, consectetur adipiscing Elit. Przedsionek bez nulla eu dui imperdiet eleifend in vel ligula. Ut tempor gravida leo. Sed w tellus justo. Nam vel nisl nulla. Proin sagittis sempre nunc et vehicula. Proin quam lacus, feugiat quis diam in, malesuada posuere odio. Integer pharetra sed ante eget posuere. Nullam a dapibus leo, vitae gravida ligula. Praesent consectetur lorem et pellentesque imperdiet. Suspendisse vitae libero auctor, pharetra nunc eu, laoreet dui. Fusce posuere risus risus, id ultricies lectus aliquet et. Nullam eget orci et mauris lacinia sollicitudin non vel felis. Praesent eleifend risus et libero ultrices facilisis.

CSS

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

Nadzieja to pomaga!

6

Dodawanie white-space normalną do znacznika zakotwiczenia w ciągu .dropdown-menu pracował dla mnie, dodając po prostu do .dropdown-menu nie praca.

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

To działało również dla mnie, myślę, że może ze względu na znaczniki z pierwotnego pytania? Nie wiem, ale dzięki! – Leo

+0

do użytku w pionowym menu ... .nav-tabs .dropdown-menu li a {white-space: normal;} – trf

Powiązane problemy