Rozszerzenie szerokości bootstrapu w celu dopasowania do pola wejściowego

Question

Wiem, że to pytanie zostało zadane co najmniej trzy razy wcześniej, ale odpowiedź, którą zobaczyłem, nie była tym, czego szukałem. Czekam na zwiększenie szerokości pola autouzupełniania, które twitter bootstrap generuje z funkcją typeahead. Czytałem, że rozciąga się na cały tekst w polu. to znaczy, im dłuższy tekst, tym szersze pole autouzupełniania. Chciałbym jednak, żeby była to span6, ponieważ tak szerokie jest moje pole wyszukiwania. Jakieś pomysły? Widziałem kilka odpowiedzi jquery, ale nie mogłem ich przestrzegać.

Answer 1

Michael Watson dał to, co myślę jest najprostsza odpowiedź w swoim komentarzu.

.twitter-typeahead { width: 100%; } 

Aktualizacja # 1: W oparciu o komentarzach poniżej (dzięki Steve Vishi), zrobić to samo dla .tt-hint, .tt-input, .tt-dropdown-menu.

Aktualizacja # 2: mlissner doniesienia, że ​​.tt-dropdown-menu jest teraz .tt-menu, więc końcowy wynik jest

.twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; } 

Answer 2

menu rozwijane jest ul z klasami typeaheaddropdown-menu można użyć CSS, aby ustawić jego szerokość:

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

Szerokość span6 nie jest statyczna, więc trzeba będzie kilka zapytań o media, aby go czuły.

Dla Bootstrap 3 funkcja usuwania jest usuwana z TB3 zamiast używać https://github.com/twitter/typeahead.js/. Będziesz potrzebował trochę additional CSS do integracji z Bootstrap na Twitterze. Musisz załadować dodatkowe pliki CSS, aby uzyskać dostęp do menu rozwijanego typeahead.js w celu dopasowania do domyślnego motywu Bootstrap. Wypróbuj extended Bootstrap's LESS lub jeśli szukasz bardziej rozbudowanej wersji spróbuj: typeahead.js-bootstrap3.less.

Lista rozwijana z ustawiana jest teraz z menu rozwijanym .tt-menu. Zamiast zmieniać CSS, możesz także spróbować ustawić szerokość dynamiczną. Z wpisywanie znaków z wyprzedzeniem klasy swojej wpisywanie znaków z wyprzedzeniem tagu wejściowych:

$('.typeahead').typeahead({}) 
on('typeahead:opened',function(){$('.tt-dropdown-menu').css('width',$('.typeahead').width() + 'px');}); 

Answer 3

Aby uczynić rozwijana dopasować szerokość pola, że ​​chcesz coś takiego:

$(document).on('typeahead:opened', function(event, datum) { 
    var width = $(event.target).width(); 
    $('.tt-dropdown-menu').width(width); 
}); 

Niewielkie ulepszenie w powyższym zakresie przy użyciu zdarzenia event.target i globalnego odbiornika dokumentów.

Answer 4

Używam Bootstrap 3.2.0 z typeahead.js-bootstrap3.less i zagnieżdżone wejście w div tak:

<div class="form-group"> 
    <label>my label</label> 
    <div class="col-md-4"> 
     <div class="input-group tt-input-group"> 
      <input id="mytypeahead" class="form-control" /> 
     </div> 
    </div> 
</div> 

Musiałem także dodać to do mojego CSS:

.tt-input-group { 
    width: 100%; 
} 

Answer 5

To jest dla nowsze wersje:

.twitter-typeahead, .tt-menu 
{ 
    display: block !important; 
}