html引导表不响应内部无序列表

Question

当我在小屏幕 320x568 中运行此代码时，表格内容会溢出包含它的整个 div。有什么办法可以解决这个问题。我希望他压缩或收缩一点只是为了适合容器。谢谢

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row ">
  <table class="table table-bordered table-sm table-responsive">
    <tbody>
      <tr>
        <td style="padding:20px">
          <p><strong>PART A - Reading Material </strong></p>
          <ul style="list-style-type:roman">
            <li><span class="blueprint">Self-help books</span></li>
            <li><span class="blueprint">Annotation sources</span></li>
            <li>Academic references
              <ul>
                <li><span class="blueprint">printed</span></li>
                <li><span class="blueprint">online</span></li>
              </ul>
            </li>
            <li><span class="blueprint">Editions of Batman</span></li>
          </ul>
        </td>
        <td style="padding:20px">
          <p><strong>Part B – Audio & Visual Material</strong></p>
          <ul start="5" style="list-style-type:roman; ">
            <li><span class="blueprint">Lectures on DVD</span></li>
            <li><span class="blueprint">YouTube original content</span></li>
            <li><span class="blueprint">Films & TV productions</span></li>
            <li><span class="blueprint">Audio recordings</span></li>
          </ul>
          <br>
          <br>
        </td>
        <td style="padding:20px">
          <p><strong>PART C – Material by Level</strong></p>
          <ul start="9" style="list-style-type:roman; ">
            <li><span class="blueprint">Introduction</span></li>
            <li><span class="blueprint">Variety of Materials</span></li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

考虑到目前还没有 css 可供使用，这有点困难。尝试为您的 div 使用百分比。然后，当它们缩小到太小的尺寸时，使用@media 查询来定义您想要停止浮动的宽度 - 添加 float:none 或 auto。此外，对于像您的徽标之类的图像，请确保包含 img {max-width:100%;} - 这将使它们能够很好地缩放。

@media (min-width: 1100px) {
  body {
    width:50%;
  }
}
@media (max-width: 1100px) {
  div {
    width:40%;
  }
}
@media (max-width: 480px) {
  div {
    width:20%;
  }
}

编辑：在移动设备中，您需要堆叠桌子，而使用桌子则无法做到这一点。谢谢@WizardCoder