html - Bootstrap表响应式叠加文本

我想要一个响应表，它应该像预期的响应引导表那样在溢出时滚动。
我正在使用此表，为什么它没有响应？
所有字符都相互重叠。

<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类中更改某些内容吗？

最佳答案

我用max-width模拟了您的问题，但您的标记运行正常（请参见下面的代码段）。

您可以检查以下内容：


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

div {
  max-width: 250px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<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>

关于html - Bootstrap表响应式叠加文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49754007/