0

私は3つの入力フィールドを持つフォームを持っています.jsfiddleでうまく動作しますが、ブラウザで実行すると入力テキストフィールドの一部が出てきます.しかし、ブラウザのサイズを小さくすると正常に動作します.ブートストラップを使用しているのですべてのフィールドは、モバイルでもタブでもコンピュータでも、すべての画面サイズで同じように機能する必要があります。すべての画面サイズで適切に機能させる方法を教えてください。

これは、div から出てくるモバイル テキスト フィールドを示すスクリーン ショットです。 ここに画像の説明を入力 これは、小さいサイズのテキスト フィールドの適切な機能を示すスクリーン ショットです。 ここに画像の説明を入力

これは入力フィールドのコードです

<div class="tab-pane" id="tab2"> 
<form class="well span9" action="insertNew" method="post"> 

<table border="1" id="mytable"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table>

<div class="row"> 
<div class="span3"> 
<label>Name</label> 
<input type="text" id="fields" class="span4" placeholder="Your full Name" name="username" required> 

</div> 
<div class="span3"> 

<label>Email Address</label> 
<input type="email" id="fields1" class="span4" placeholder="Your email address" name="email" required> 
</div> 
<div class="span3"> 
<label>Mobile</label> 
<input type="tel" id="fields2" class="span4" placeholder="+756762462182" name="mobile" maxLength="13" required > 
</div> 
</div> 
<input type="button" id="btn1" class="btn btn-lg btn-primary" value="Add">
</form> 
<div class="well span9">    <input type="button" id="btn2" class="btn btn-lg btn-primary" value="Group">
</div>

</div>
4

1 に答える 1

1

このようなものを試してみてください、フィドル

    <form class="form-horizontal">
        <div class="control-group">
            <label class="control-label" >Name</label>
            <div class="controls">
                <input type="text" id="fields" class="span4" placeholder="Your full Name" name="username" required />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" >Email Address</label>
            <div class="controls">
                <input type="email" id="fields1" class="span4" placeholder="Your email address" name="email" required />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" >Mobile</label>
            <div class="controls">
                <input type="tel" id="fields2" class="span4" placeholder="+756762462182" name="mobile" maxLength="13" required />
            </div>
        </div>
        <div class="control-group">
            <input type="button" id="btn1" class="btn btn-lg btn-primary" value="Add">
            <input type="button" id="btn2" class="btn btn-lg btn-primary" value="Group">
        </div>
    </form>
于 2013-10-29T05:37:06.037 に答える