2

流動的な行内の検索入力に使用しようとしていますinput-appendが、残念ながら、コンテナの全幅に拡大縮小されないため、正しく機能していないようです。

これが私のサンプルコードです：

<div class="container">
<div class="row-fluid">
<div class="span12">


    <div class="input-append">
    <input class="span12" id="appendedInputButton" type="text">
    <button class="btn" type="button">Go!</button>
    </div>

</div>
</div>
</div>

ただし、入力はの全幅をスケーリングしませんspan12。なぜこれが起こっているのか、私が何を見逃しているのか誰かが知っていますか？

4

4 に答える 4

2

これがjsFiddleです：http：//jsfiddle.net/persianturtle/SXcV3/

#appendedInputButton {
    width:100%;
}

また、入力自体ではなく、入力を保持するdivにspan12クラスを使用することをお勧めします。

更新：ブートストラップは美的理由でボタンにいくつかのパディングを追加するため、入力ボタンの幅を95％にしました。これは、水平スクロールバーがない場合に見栄えが良くなります。

更新されたjsFiddle：http: //jsfiddle.net/persianturtle/SXcV3/1/

于 2013-02-12T22:20:51.110 に答える
1

ボタンの幅を固定するには、別の手法を使用できます

.controls { 
    position: relative; 
}

.input-append{
    width: 100%;
}

.input-append input[type="text"]{
    position: absolute;
    width: auto !important;
    margin-right: 42px;
    left: 0px;
    right: 0px;
}

.input-append button{
    width: 42px;
    float: right;
    margin: 0px !important;
    padding: 0px !important;
}

.input-append input[type="text"],
.input-append button{
    height: 42px;
    -webkit-box-sizing: padding-box;
    -moz-box-sizing: padding-box;
    -ms-box-sizing: padding-box;
    box-sizing: padding-box;
}
于 2013-07-09T16:58:56.993 に答える
0

不要.row-fluidと.span12divがあります。正しいマークアップは

<div class="container">


    <div class="input-append">
    <input class="span12" id="appendedInputButton" type="text">
    <button class="btn" type="button">Go!</button>
    </div>

</div>

働くフィドル

于 2013-02-12T22:21:43.540 に答える