引导表格式在 Chrome 中错误，但在 Firefox 中正确

Question

我有一个引导表，它在 Firefox 中的格式完全正确，但在 Chrome 上却全部扔到了右边。有什么想法吗？

火狐：

铬：

我最初认为这可能与它在一个响应表格的 div 中有关，但我删除了它，它没有任何区别。

!----- 更新 -----!

它似乎是列大小。如果我删除它，那么格式会恢复正常，但我无法控制表格列的大小。

这是 HTML：

<div class="row">
  <div class="col">
      <table class="table">
        <tr>
          <th class="col-1 text-center"><input class="form-check-input position-static" type="checkbox" id="checkAll" value="option1"></th>
          <th class="col-2"><a class="text-body" href="?page={{ contacts.number }}&order_by=displayName">Name</a></th>
          <th class="col-3 d-none d-lg-table-cell"><a class="text-body" href="?page={{ contacts.number }}&order_by=companyName">Organisation</a></th>
          <th class="col-3 d-none d-lg-table-cell"><a class="text-body" href="?page={{ contacts.number }}&order_by=jobTitle">Job Title</a></th>
          <th class="col-1 d-none d-md-table-cell"><a class="text-body" href="?page={{ contacts.number }}&order_by=profession">NSO</a></th>
          <th class="col-1 d-none d-lg-table-cell"><a class="text-body" href="?page={{ contacts.number }}&order_by=lastModifiedDateTime">Last Updated</a></th>
          <th class="col-1">Profile</th>
        </tr>
        {% if contacts %}
        {% for contact in contacts %}
        <tr>
          <td class="col-1 text-center"><input class="form-check-input position-static" type="checkbox" id="blankCheckbox" name='selected_contact' value={{ contact.per_contact_id }}></td>
          <td class="col-2"><a href="mailto:?bcc={{ contact.emailAddresses.0.address }}" class="text-primary">{{ contact.displayName }}</a></td>
          <td class="col-3 d-none d-lg-table-cell">{{ contact.companyName }}</td>
          <td class="col-3 d-none d-lg-table-cell">{{ contact.jobTitle }}</td>
          <td class="col-1 d-none d-md-table-cell">{{ contact.profession }}</a></td>
          <td class="col-1 d-none d-lg-table-cell">{{ contact.modified }}</td>
          <td class="col-1"><button name="submit_button" type="submit" class="btn btn-link text-success noline" value={{ contact.per_contact_id }}>View</button></td>
        </tr>
        {% endfor %}
        {% endif %}
      </table>
  </div>
</div>

Answer 1

在您的代码中有一些更改，您忘记在您的列中添加row 类和col-md-1 或col-sm-1 等将您的代码替换为以下代码

<div class="row">
      <div class="col">
         <table class="table">
            <thead>
               <tr class="row">
                  <th class="col-md-1 text-center"><input class="form-check-input position-static" type="checkbox"
                        id="checkAll" value="option1"></th>
                  <th class="col-md-2"><a class="text-body"
                        href="?page={{ contacts.number }}&order_by=displayName">Name</a></th>
                  <th class="col-md-3 d-none d-lg-table-cell"><a class="text-body"
                        href="?page={{ contacts.number }}&order_by=companyName">Organisation</a></th>
                  <th class="col-md-3 d-none d-lg-table-cell"><a class="text-body"
                        href="?page={{ contacts.number }}&order_by=jobTitle">Job Title</a></th>
                  <th class="col-md-1 d-none d-md-table-cell"><a class="text-body"
                        href="?page={{ contacts.number }}&order_by=profession">NSO</a></th>
                  <th class="col-md-1 d-none d-lg-table-cell"><a class="text-body"
                        href="?page={{ contacts.number }}&order_by=lastModifiedDateTime">Last Updated</a></th>
                  <th class="col-md-1">Profile</th>
               </tr>
            </thead>
            <tbody>
               {% if contacts %}
               {% for contact in contacts %}
               <tr class="row">
                  <td class="col-md-1 text-center"><input class="form-check-input position-static" type="checkbox"
                        id="blankCheckbox" name='selected_contact' value={{ contact.per_contact_id }}></td>
                  <td class="col-md-2"><a href="mailto:?bcc={{ contact.emailAddresses.0.address }}"
                        class="text-primary">{{ contact.displayName }}</a></td>
                  <td class="col-md-3 d-none d-lg-table-cell">{{ contact.companyName }}</td>
                  <td class="col-md-3 d-none d-lg-table-cell">{{ contact.jobTitle }}</td>
                  <td class="col-md-1 d-none d-md-table-cell">{{ contact.profession }}</a></td>
                  <td class="col-md-1 d-none d-lg-table-cell">{{ contact.modified }}</td>
                  <td class="col-md-1"><button name="submit_button" type="submit"
                        class="btn btn-link text-success noline" value={{ contact.per_contact_id }}>View</button></td>
               </tr>
               {% endfor %}
               {% endif %}
            </tbody>
         </table>
      </div>
   </div>

如果有效，请告诉我

Answer 2

我查看了版本 4 的文档，但 Layout 或 Table 部分中没有任何内容表明您可以像这里一样使用表格单元格中的布局类。特别是，flex 属性不适用于表格单元格。

Chrome 中的第一列是超宽的，因为所有 col-* 类的宽度都是 100%。在 Chrome 中，这会导致第一列尝试占用 100% 的空间，因此它最终变得非常宽，并迫使其他列变窄。

考虑添加到Bootstrap's existing width classes，而不是尝试使用布局类调整列的大小：

.w-8 {
  width: 8.333%;
}

.w-16 {
  width: 16.667;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<table class="table">
  <thead>
    <tr>
      <th class="text-center w-8"><input class="form-check-input position-static" type="checkbox" id="checkAll" value="option1"></th>
      <th class="w-16">Name</th>
      <th class="w-25 d-none d-lg-table-cell">Organization</th>
      <th class="w-25 d-none d-lg-table-cell">Job Title</th>
      <th class="w-8 d-none d-md-table-cell">NSO</th>
      <th class="w-8 d-none d-lg-table-cell">Last Updated</th>
      <th class="w-8">Profile</th>
    </tr>
  </thead>
  <tbody>
     <tr>
          <td class="text-center w-8"><input class="form-check-input position-static" type="checkbox" id="blankCheckbox" name='selected_contact' value=""></td>
          <td class="w-16"><a href="mailto:" class="text-primary">Example Name</a></td>
          <td class="w-25 d-none d-lg-table-cell">Example Company</td>
          <td class="w-25 d-none d-lg-table-cell">Example Title</td>
          <td class="w-8 d-none d-md-table-cell">Example Profession</a></td>
          <td class="w-8 d-none d-lg-table-cell">MM/DD/YYY</td>
          <td class="w-8"><button name="submit_button" type="submit" class="btn btn-link text-success noline" value="">View</button></td>
        </tr>
  </tbody>
</table>

创建w-8 和w-16 类，使用它们和现有的w-25 类替换表中的col-* 类。我制作了一个没有 Django 代码的可运行版本，因此您可以看到它的工作原理。

Answer 3

正如 BSMP 所说，当您将 col 类添加到表时，chrome 似乎无法正常运行。所以我只是使用了一些自定义 css：

.w5 {
    width: 5%;
}
.w10 {
    width: 10%;
}
.w15 {
    width: 15%;
}
.w20 {
    width: 20%;
}
.w25 {
    width: 25%;
}
.w30 {
    width: 30%;
}