时间戳

首页 > 解决方案 > 关于简单 Bootstrap 3.4.1 表中缺失列的任何想法？

html - 关于简单 Bootstrap 3.4.1 表中缺失列的任何想法？

问题描述

我在响应式网格中有一个非常简单的 4 列引导表。一些客户报告说adLabel单元格/列没有显示，他们不知道数据的含义。adLabel和adData之间的唯一区别是字体粗细。我认为这是一个字体问题，直到该客户发送了一个屏幕截图，显示这些列完全丢失。

客户截图

示例代码：

.adLabel {
   font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
   color: black;
   text-align: left; 
   vertical-align: top;
   font-weight: normal;
}
.adData {
  font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
  color: black;
  text-align: left;
  vertical-align: top;
  font-weight: 600;
}
<!-- Bootstrap-3.4.1 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


<!-- Body -->
<table class="table table-striped" style="width:100%; border:0; padding:5px;">
<tr><td colspan="4" class="bgLightgray center"><h4>Horse Name</h4></td></tr>
<tr><td class="adLabel" style="width:20%">Location</td>
<td class="adData" style="width:30%">Colorado</td>
<td class="adLabel" style="width:20%">Breed</td>
<td class="adData" style="width:30%">Pony</td></tr>
</table>

标签： htmlcsstwitter-bootstraptwitter-bootstrap-3

解决方案

广告拦截器正在阻止adLabel课程。就我而言，它的uBlock。

您只需要重命名该类。

推荐阅读