如何调整bootstrap表中文本输入的宽度？

Question

我正在使用Bootstrap 2.3，我在表中使用引导表样式的7个文本输入字段。我想调整（或缩小宽度）这些文本输入，而不是占用表格单元格的整个宽度，但我不能这样做

我尝试使用span1的类，但它并没有很好地缩小它们。 那么有没有办法最小化表格单元格中所有文本输入字段的大小或宽度？

这是我的代码：

<table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Exercise</th>
                        <th>Exercise Code</th>
                        <th>Initiated by</th>
                        <th>Initiated on</th>
                        <th>Done by</th>
                        <th>Q1</th>
                        <th>Q2</th>
                        <th>Q3</th>
                        <th>Q4</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="text" class="input-mini span1" />
                        </td>
                        <td>
                            <input type="text" class="input-mini span1" />
                        </td>
                        <td>
                            <input type="text" class="input-mini span1" />
                        </td>
                        <td>
                            <input type="text" class="input-mini span1" />
                        </td>
                        <td>
                            <input type="text" class="input-mini span1" />
                        </td>
                        <td>
                            <input type="text" class="input-mini span1" />
                        </td>
                        <td>
                            <input type="text" class="input-mini span1" />
                        </td>
                        <td>
                            <input type="text" class="input-mini span1" />
                        </td>
                        <td>
                            <input type="text" class="input-mini span1" />
                        </td>
                        <td>
                            For Action
                        </td>
                    </tr>
                </tbody>
            </table>

Answer 1

由于您可以访问JQuery，请尝试在html的<header>区域中执行此操作，但请确保它在所有Javascript包含之后。

<script type="text/javascript">
  $(".span1").css("width", "10px");
</script>

如果以上情况有效，我认为您需要更新原始帖子以显示所有js / css包含。这似乎只是你的错误顺序。

- 下面的原始答案 -

你能不能简单地在标题中添加一个CSS条目，如：

.table > input[type="text"] {
    width: 10px;
}

唯一不好的是，这将改变使用.table类的所有table type = text元素。

那么，让表本身具有span1标记并更改上面的代码以反映它吗？

.span1 > input[type="text"] {
    width: 10px;
}

*注意：请确保这是在您引用bootstrap css之后。