Bootstrap 3 wybierz opcje odcinania

Question

Czy istnieje sposób, aby zapobiec opcji "cut-off" opcji Bootstrap wybiera? Zobacz poniższy kod i poniższe zdjęcia. Pierwsze zdjęcie pokazuje prawidłowe wyświetlanie opcji. Drugie zdjęcie pokazuje opcje odcinania po zmianie rozmiaru ekranu, aby były mniejsze niż tekst opcji.

Jeśli nie mogę tego zrobić za pomocą CSS, planuję użyć jQuery do ustawienia szerokości pola wyboru równego największej szerokości opcji, jeśli szerokość opcji jest większa niż szerokość wyboru.

<select class="form-control multiple" size="3"> 
    <option>test123 test123 test123 test123 test123 test123</option> 
    <option>test123 test123 test123 test123 test123 test123</option> 
</select> 

Answer 1

Jedyne co mogę myśleć o to, że skoro pojemniki Bootstrap reagują przez naturę, są one automatycznie zamiar zmienić rozmiar <input> zależności od aktualnej wielkości okna przeglądarki. Spójrz na tej struktury:

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <input type="text" class="form-control" value="I am a very, very, very, very, very, very long option. I'm going to extend off the screen."/> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <select class="form-control"> 
     <option value="1">I am a very, very, very, very, very, very long option. I'm going to extend off the screen.</option> 
     </select> 
    </div> 
    </div> 
</div> 

W tym przykładzie, jeśli zmiana rozmiaru okna mniejsze, szerokość <input> i <select> dostosuje się do wielkości pojemnika To w <div class="col-xs-12">. Aby temu zapobiec, potrzebowalibyśmy użyć wejść o stałej szerokości, co w pewnym sensie jest przeciwne użyciu responsywnego framewru takiego jak Bootstrap, ale widzę potrzebę w niektórych sytuacjach.

Niektóre sugestie do rozważenia:

• Czy to możliwe, aby mieć mniejsze etykiety opcja?
• Czy Twój <select> jest w pojemniku o maksymalnej szerokości?
• Czy jest możliwe skorzystanie z opcji <modal> w celu wybrania opcji, jeśli nie ma miejsca?

A jeśli wszystko inne zawiedzie, zawsze można utworzyć klasę niestandardową <div class="col-xs-12 fixed"> i ustawić szerokość na coś statycznego, albo wartość bazową lub, jak zasugerował przy użyciu JQuery, aby znaleźć max-width najdłuższego wartości opcji.

Nadzieję, że pomaga!