Мишель прав. white-space: nowrap - проблема. Нужно поменять на white-space: normal, как она говорила. Но тогда проблема будет высотой. В основном, когда слово бежит ко второй строке, как и предполагалось, тогда одна кнопка будет выше остальных. Это не проблема, но у вас может быть граница, которую вы пытаетесь достичь на кнопках, или изменение фона при наведении. Это когда будет проблемой, что они не одинаковой высоты.
В этом случае, я думаю, было бы лучше добавить дополнительный CSS, который увеличивает высоту, чтобы быть равным, или добавить JavaScript/JQuery, чтобы автоматически получить высоту самой высокой кнопки и сделать все кнопки одинаковой высоты в окне загружать и изменять размер. Ни один из них не самый лучший вариант, потому что трудно заставить CSS реагировать, а не у всех пользователей есть включен JavaScript.
Я ищу то же самое решение. Я также стараюсь использовать стиль таблицы, а не для обоснованной группы кнопок Bootstrap 3. Я использую тему Roots (roots.io). Я думаю, что пока вы можете найти что-то, что будет работать до 330 пикселей, у вас все будет хорошо.
Вероятно, что было бы лучше всего использовать отзывчивы таблицы данных:
http://css-tricks.com/responsive-data-tables/
Затем попытайтесь стиль, чтобы заполнить ширину контейнера и быть равна высоте, пока он не может поместиться красиво ширина мудрая, в котором он затем меняется на другое меню стилей. Проблема с таблицами, это должна быть таблица, потому что display: table * не работает в IE8 и старше и т. Д. Таблицы трудно перепроектировать с помощью запросов @media, даже если вы можете получать запросы @media для работы в IE8 и старше, но с JavaScript, опять же, не все пользователи используют JavaScript. Ultimatel
В конечном счете, вы не задаете небольшой вопрос.Вы действительно спрашиваете: «Как сделать несколько div, заполнить контейнер и быть равным высоте, независимо от того, увеличивается ли количество divs или уменьшается?» < - ОГРОМНЫЙ вопрос, когда дело доходит до IE8 и старше, и людей с отключенным JavaScript и т. Д.
MY IDEA: 1. Я бы хотел, чтобы люди с выключенным JavaScript имели фиксированную ширину. Это сложно из-за мобильных устройств и того, как они будут вести себя для масштабирования браузера. Таким образом, вы должны установить минимальную ширину на том, что обертывает ваш контент, а затем отключить его с помощью javascript. 2. Создайте сайт, чтобы хорошо выглядеть с CSS с минимальной шириной для пользователей без Javascript. Вы можете сделать это, отключив Javascript, просмотрев сайт с минимальной шириной без JS и соответствующим дизайном. Затем исправить дизайн с помощью запросов @media и JS. 3. Включить запросы @media для IE8 и старше (и более старые FireFox и т. Д.) С JS, такими как cssmediaqueries.js или reply.js и т. Д.
Таким образом, если javascript не будет, @Media не потребуется запросы и сайт будут оформлены, чтобы выглядеть отлично, без него, это будет минимальный дизайн. ТОГДА вы должны быть в состоянии получить все, чтобы выглядеть довольно хорошо во всех браузерах, включая старые браузеры, с помощью запросов @media и javascript.
ДЛЯ ПРОЕКТА:
Я дам вам знать. Я все еще думаю, что работа с таблицами для гибкой ширины и высоты будет лучшим вариантом - либо это, либо выяснить способ сделать кнопки равной высоты другим способом.
