Yesod CSS lucius

Question

我在我的小村文件中创建了一个表：

<table>
$forall ivlist <- y
    <tr>
      $forall iv <- ivlist
        <td>^{fvInput iv}

及其在lucius档案中的各自CSS：

td {
    width:1em;
    height:1em;
}

CSS也按预期生成，但输出结果不同。当我将height和width更改为更高的值时，更改可见，但当我将其更改为较低的值时，它不再减少。

Here是生成的表的图像

我无法更改列width。我想让它成为正方形。但我不知道应该做些什么。我使用静态 bootstrap.css 文件，每个单元格都是input。我认为问题应该是由于bootstrap中的一些默认值。但我找不到应该改变的东西。我尝试了一些更改，例如更改width和修改 bootstrap.css 文件，但我没有得到所需的结果。

input[type="range"] {
  display: block;
  width: 100%;
}

简而言之，如何修改单元格width？ 我应该修改哪些内容以查看width的{​​{1}}中的更改？

Answer 1

我明白了。这很简单。对input标记进行了更改。所以我在lucius文件中添加了以下内容

input {
    width:3em;
}

允许我控制宽度。