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查询来定义您想要停止浮动的宽度 - 添加一个浮点数：无或自动。对于像你的徽标或其他东西的图像，请确保包含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

html引导表没有响应里面的无序列表

1 个答案: