min-szerokość dla kolumny w systemie siatki Bootstrap

Question

Mam następujące HTML z Bootstrap CSS.

<div class="row"> 
    <div class="col-sm-4" style="min-width: 66px;">Name</div> 
    <div class="col-sm-1" style="min-width: 120px;">Instance name</div> 
    <div class="col-sm-7" style="min-width: 87px;">Due date</div> 
</div> 

bez „min szerokości” a szerokość drugiej kolumnie w niektórych przypadkach mniej niż 120 pikseli i "nazwa wystąpienia nie jest w pełni widoczny. Tak więc dodałem "min-width", a szerokość wiersza w tych przypadkach przekracza 100%. Ostatnia kolumna jest zawijana do nowej linii.

Chcę mieć dynamiczną szerokość kolumny bootstrap, a nazwa wystąpienia nie zniknie, gdy zmniejszę rozmiar okna przeglądarki. Jak mogę osiągnąć takie zachowanie?

Answer 1

Nie wiem, czy istnieje taki sposób, aby osiągnąć to, co chcesz.

The col-sm-x określa szczególne wartości procentowe podane w swojej rzutni, a jeśli podasz wartości niestandardowe, a następnie gromadzone szerokość wszystkich kolumn będzie albo więcej lub mniej niż 100%, co nie jest pożądane zachowanie.

Zamiast tego można podać wiele klas dla tego samego elementu div. Przykład:

<div class="row"> 
    <div class="col-sm-4 col-xs-1">Name</div> 
    <div class="col-sm-1 col-xs-3">Instance name</div> 
    <div class="col-sm-7 col-xs-2">Due date</div> 
</div> 

Jeżeli to rozwiązanie nie wystarcza, to najprawdopodobniej będzie pochodzić z javascript rozwiązania jakiegoś że ręcznie ustawia szerokość innych div.

Wydaje się, że istnieje inne, podobne pytanie wcześniej opublikowane tutaj na stackoverflow. Spójrz na here.

Bootstrap Grid on W3C

Answer 2

Czy próbowałeś zmienić swoje wartości dla mniejszych rozdzielczości? Na przykład

<div class="col-lg-4 col-sm-4">Name</div> 
    <div class="col-lg-1 col-sm-2">Instance name</div> 
    <div class="col-lg-7 col-sm-6">Due date</div> 

Bootstrap posiada opcje dla różnych rozmiarów ekranu, więc warto je sprawdzić: http://getbootstrap.com/css/

Answer 3

Bootstrap kolumny są Flex przedmiotów. Musisz zdecydować się na jedną kolumnę, która powinna się zmniejszyć, gdy inne osiągną minimalną szerokość.

Dla twojego przykładu wybrałem ostatni, "Termin płatności", który normalnie powinien być w kolumnie-sm-7. I zmniejszyć do col-sm-1, ale dać mu flex-grow i musimy nadpisać właściwość max-width bootstraps.

<div class="row"> 
    <div class="col-sm-4" style="min-width: 66px;">Name</div> 
    <div class="col-sm-1" style="min-width: 120px;">Instance name</div> 
    <div class="col-sm-1" style="min-width: 87px; flex-grow: 1; max-width:100%; ">Due date</div> 
</div> 

tutaj jest całkiem codepen zrobiłem: https://codepen.io/timar/pen/VQWmQq/