Question

Bootstrap响应无法用于移动屏幕。请帮帮我当我最小化屏幕时，td表文本会在小屏幕中溢出边框

例如：描述，运输，工业。不能用于移动屏幕文字溢出边框，它在单行中不能在小屏幕中工作分词

我提到w3schools Bootstrap 4 Tutorial 响应表在该页面的最后一页

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>

Bootstrap响应表无法正常工作文本在rails项目

0 个答案: