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;
}

しかし悲しいことに、ボタンは新しい行に分割されるか、使用されている場合は-divwhite-space: nowrapの外にあります。.outer

これはテーブルで動作するが、テーブルとして機能する他の要素では動作しない JSfiddle です: http://jsfiddle.net/t34Au/1/

ブートストラップ 3 のセクションは次のとおりです http://getbootstrap.com/components/#input-groups

ここで何が間違っているのかわかりません。どんな助けでも大歓迎です。

4

1 に答える 1

2

ボタンであるbuttonやを指定しないでください。inputdisplay: table-cell

本当にうまくいきません。

http://getbootstrap.com/components/#input-groups-buttonsを読むと、次のように記載されています。

入力グループのボタンは少し異なり、ネストの追加レベルが 1 つ必要です。の代わりに、 を使用してボタンをラップする.input-group-addon必要があり ます。.input-group-btnこれは、オーバーライドできないデフォルトのブラウザー スタイルのために必要です。

必要に応じて、ブートストラップなしでこれを行う方法を示すデモを次に示します: http://jsfiddle.net/thirtydot/t34Au/3/

これは、Bootstrap と同じ基本的な方法を使用します。

Bootstrap デモから HTML をコピーし、Bootstrap をインポートしたデモは次のとおりです: http://jsfiddle.net/thirtydot/2cGaG/

于 2013-08-24T15:08:50.260 に答える