1

このフィドルのサイズを変更すると、画面を縮小すると入力ボックスが大きくなります。残念ながら、iPhone では、アプリで画面から消えてしまいます。

ここにフィドルがあります: http://jsfiddle.net/v6Bhx/5/embedded/result/そしてここにコードがあります:

<div class="row-fluid">
<div class="span6">
    <table width="500">
        <tr>
            <td>
                <div class="input-prepend">
                   <span class="add-on">$</span>
                   <input type="text" name="fee" value="" class="span6" />

                </div>
            </td>
       </tr>
  </table>
</div>
<div class="span6">Test</div>
</div>

また、はい、テーブルを使用していることに気づきました。私はデータをフォーマットするためにこれを行っていません。実際には、たまたま入力ボックスが含まれている表形式のデータに使用されています。

4

3 に答える 3

0

私の提案はを使用すること table width="100%" です。

<div class="row-fluid">
<div class="span6">
    <table width="100%">
        <tr>
            <td>
                <div class="input-prepend"> <span class="add-on">$</span>

                    <input type="text" name="fee" value="" class="span6"
                    />
                </div>
            </td>
        </tr>
    </table>
</div>
<div span="6">Test</div>
</div>
于 2013-02-26T01:28:44.313 に答える
0

テーブル幅を 500px に設定すると、ビューポイントがモバイル サイズに縮小されるため、問題が発生する可能性があります。表の幅を削除して、何が起こるかを確認してください。

アップデート

最終的なページとテーブルの外観を正確に想像することはできませんが、確認できる追加のポイントがいくつかあります。

iPhone の表示の問題に関しては、ページのヘッダーに次の項目があることを確認してください。 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

表幅100%を指定するとHTML5無効になると思います。これが問題の原因であるとは思えませんが、CSS で次のようなことを試してください。 

.span6 table{
width:100%;
}

テーブル内に入力プリペンドを含むフォームを作成するのは難しいことがわかります。これを回避する方法がない場合は、現時点でネストの問題があります。input.span6 は実際には別の span6 列内にネストされています。

一般に、流動的な行を持つネストされたグリッドの HTML は次のとおりです。

<div class="row-fluid">  
<div class="span6">  

  <div class="row-fluid"> <!-- start nested grid -->
  <div class="span12">
  <!-- Form and table details here -->
  </div> <!-- end nested span -->
  </div> <!-- end nested row -->  

</div> <!-- end span6 -->  

<div class="span6">  
  test  
</div>
</div>

詳細については、 http://twitter.github.com/bootstrap/scaffolding.html#gridSystemの流動的なネストのセクションを参照してください。

幸運を！

于 2013-02-25T22:07:01.443 に答える
0

スライダーに幅を設定するか：

<input style="width:125px;" type="text" name="fee" value="" class="span6" />

またはcssを使用する

.span6 { width: 125px; }

その理由は、ページのサイズ変更時にテーブルの行幅が変更されているためです

于 2013-02-25T23:47:38.463 に答える