Question

我正在尝试构建bootstraps新的“输入组”。他们将表格单元格用于输入字段及其标签/按钮，以便它们一起占据100％的宽度。

.outer {
    border: 1px solid #ccc;
    display: table;
    width: 100%;
}

button, input {
    border: 0;
    display: table-cell;   
}

input {
    width: 100%;
    border: 1px solid green;
}

但遗憾的是，按钮会分成一个新行，或者 - 如果使用white-space: nowrap，则它位于.outer - div之外。

这是一个与表一起使用的JSfiddle，但不适用于应该充当表的其他元素： http://jsfiddle.net/t34Au/1/

这是bootstrap 3中的部分 http://getbootstrap.com/components/#input-groups

我不明白我在这里做错了什么。任何帮助表示赞赏。

Answer 1

不要将[{1}}或button作为按钮input。

它确实不起作用。

如果您阅读http://getbootstrap.com/components/#input-groups-buttons，则说明：

输入组中的按钮略有不同，需要一个额外的按钮嵌套水平。而不是display: table-cell，您需要使用 .input-group-addon包裹按钮。由于默认情况，这是必需的无法覆盖的浏览器样式。

以下是一个演示，展示如何在没有Bootstrap的情况下执行此操作（如果需要）：http://jsfiddle.net/thirtydot/t34Au/3/

这使用与Bootstrap相同的基本方法。

这是一个演示，我从Bootstrap演示中复制了HTML并导入了Bootstrap：http://jsfiddle.net/thirtydot/2cGaG/

display：table-cell的行为与实际表格不同

1 个答案: