Bootstrap表响应覆盖文本

Question

我想要一个响应式表，当响应式引导程序表的过流时，它会滚动。 我使用这张桌子，为什么它不响应？ 所有角色都叠加在一起。

<div class="table-responsive">
  <table class="table table-hover table-striped" id="materials-table">
    <thead>
        <th>ID</th>
        <th>Descritivo</th>
        <th>Qtd</th>
        <th></th>
        <th>Min</th>
        <th>Media <br> P/Instalação</th>
        <th>Fornecedor <br> Habitual</th>
        <th>Ultimo Preço</th>
        <th></th>
    </thead>
   <tbody>
    <tr>
      <td>1</td>
      <td>CALHA METALICA EM U 4x4x4</td>
      <td>
         <input type="text" size="1" value="20" class="stock-update"><span> (m)</span>
      </td>
      <td>  <a href=""><i class="fa fas fa-edit" style="font-size:1.5em; color:blue; padding-top:4px"></i></a></td>
      <td>30 <span>(m)</span>
      <td>5 <span>(m)</span></td>
      <td>Gavedra</td>
      <td>14€ <span>p/(m)</span></td>
      <td><a href=""><i class="fa fas fa-cogs" style="font-size:2em; color:blue"></i></a></td>
    </tr>
   </tbody>
  </table>
  </div>

我应该在bootstrap类中改变一些东西吗？

Answer 1

我使用<uses-feature android:name="android.hardware.sensor.compass" android:required="true"/> 模拟了您的问题，但您的标记工作正常（请参阅下面的代码段）。

您可以查看以下内容：

• 使用浏览器Web检查器检查您自己的某些样式是否会覆盖引导类的样式
• 检查您是否对表格单元格或其内容应用了positioning规则。看起来它们与定位的父元素对齐。

＆＃13;

＆＃13;

max-width

＆＃13;

div {
  max-width: 250px;
}

＆＃13;

＆＃13;

＆＃13;