Адаптивные таблицы Bootstrap не работают, текст переполняется в проекте rails

Bootstrap не работает для мобильного экрана. Пожалуйста, помогите мне
Когда я минимизирую экран, текст таблицы td выходит за пределы границы на маленьком экране

Пример: описание, транспорт, промышленность. Не работает для мобильного экрана текст выходит за границу, он идет в одной строке, не работает разрыв слова на маленьком экране

я сослался на Учебное пособие по w3schools Bootstrap 4 Адаптивные таблицы - последняя таблица на этой странице

Таблица td не работает для мобильного экрана. Текст таблицы td переполняется граница, но он работает правильно для настольных компьютеров и ноутбуков

    <div class = "container">
     <div class = "row">
     <div class = " col-md-10 col-md-offset-1 bs-linebreak">
     <div class = "table-responsive">
        <table class = "table", style= "" border = "1">
           <thead>
              <tr>
                 <th>
                    <h5 class = "text-primary text-left"><% = "User"%></h5>
                 </th>
                 <th>
                    <h5 class = "text-primary"><% = "Shop Name"%></h5>
                 </th>
                 <th>
                    <h5 class = "text-primary"><% = "Transportation"%></h5>
                 </th>
                 <th>
                    <h5 class = "text-primary"><% = "Shop Industry"%></h5>
                 </th>
                 <th>
                    <h5 class = "text-primary"><% = "Shop Description"%></h5>
                 </th>
              </tr>
           </thead>
           <tbody>
              <tr>
                 <%@user.shops.limit(1).each do |shop| %>
                 <td style = "word-wrap: break-word;min-width: 160px;max-width: 160px;">
                    <h5><%=link_to shop.user.username.first(15).capitalize, profil_path(shop.user.id),class: "text-danger"%>  </h5>
                    <h6><%=shop.user.business_type.capitalize%></h6>
                    <h6><%=shop.shop_country%></h6>
                 </td>
                 <td style = "word-wrap: break-word;min-width: 160px;max-width: 160px;">
                    <h6><%=shop.shop_name.capitalize.first(26) %></h6>
                    <h6><%=shop.shop_country.capitalize.first(12)%>/<%=shop.shop_city.capitalize.first(12)%></h6>
                 </td>
                 <td style = "word-wrap: break-word;min-width: 160px;max-width: 160px;">
                    <h6><%= shop.transportation%> </h6>
                 </td>
                 <td style = "word-wrap: break-word;min-width: 160px;max-width: 160px;">
                    <h6><%=shop.user.industry%></h6>
                 </td>
                 <td style = "word-wrap: break-word;min-width: 160px;max-width: 160px;">
                    <h6>
                       <%= shop.description.capitalize %>
                    </h6>
                 </td>
                 <% end %>
           </tbody>
           </tr>  
        </table>
     </div>
  </div>

Что не работает? Пожалуйста, будьте более информативными.

sorak 10.03.2018 10:31
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
1
149
0

Другие вопросы по теме