2

我正在尝试构建引导程序新的“输入组”。他们将表格单元格用于输入字段及其标签/按钮，以便它们一起占据 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/

这是引导程序 3 http://getbootstrap.com/components/#input-groups中的部分

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

4

1 回答 1

2

不要给出按钮buttons 或s 。inputdisplay: table-cell

它真的不起作用。

如果您阅读http://getbootstrap.com/components/#input-groups-buttons它指出：

输入组中的按钮有点不同，需要一层额外的嵌套。而不是.input-group-addon，您需要使用 .input-group-btn来包装按钮。由于无法覆盖默认浏览器样式，因此这是必需的。

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

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

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

于 2013-08-24T15:08:50.260 回答