html - 如何调整 Bootstrap 表中文本输入的宽度？

Question

我正在使用 Bootstrap 2.3，我在一个使用 Bootstrap 表格样式的表格中有大约 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，请尝试在您的 <header> 中执行此操作html 的区域，但要确保它是在所有 Javascript 包含之后。

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

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

--下面是原始答案--

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

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

唯一的缺点是这将更改所有使用 .table 类的 table type=text 元素。

那么，让表本身有 span1 标签并更改上面的代码来反射(reflect)它吗？

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

*注意:确保这是在您引用 Bootstrap css 之后。