Bootstrap固定内容在表中?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (65)

如何在bootstrap中修复表中的内容?我的代码:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="accounts">
  <div class="table-responsive">
    <table class="table">
      <tr>
        <th>Аккауты ВК</th>
        <th>Количество</th>
        <th>Цена</th>
        <th></th>
      </tr>
      <tr>
        <td>
          <div class="icon float-left mr-2">
            <i class="fab fa-vk"></i>
          </div>
          <p>
            Аккаунты Instagram | Зарегистрированы с MIX ip.
          </p>
        </td>
        <td>
          1230 шт.
        </td>
        <td>
          <del class="text-danger">950 руб.</del> 920 руб. <span class="text-muted">/ 1 шт.</span>
        </td>
        <td class="text-right">
          <a href="" class="w-100 btn btn-success btn-sm">
            <i class="fas fa-shopping-cart"></i> Купить
          </a>
        </td>
      </tr>
    </table>
  </div>
</div>

我有响应表,但是当我在手机上看到这个表时,这个表的文本非常小,它在下一行中断。我如何在表中修复内容?并且只能在手机上滚动?

提问于
用户回答回答于

使用您的代码似乎在这个小提琴中正常工作。

http://jsfiddle.net/joshmoto/hapzr61g/

你脑子里有正确的meta标签吗?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">

    <title>initial scale = 1 / max scale = 1</title>

</head>

此元标记会name="viewport"阻止视口将html缩放到当前设备屏幕的容器宽度。

相反,视口将所有html保持在其实际比例,并依赖于响应式样式将宽度和元素缩小到当前设备屏幕宽度。

扫码关注云+社区

领取腾讯云代金券