Bootstrap輸入表單控件無法在移動設備上運行
[英]Bootstrap input form-control not working on mobile device
問題描述
我在移動版中輸入的不是打開鍵盤來輸入數據。 當我點擊輸入時沒有任何反應（在移動設備中）。 此問題僅發生在移動設備中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content=""> <meta name="author" content=""> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title" align="center" style="display: inline;font-weight: bold;">Credit Card</h3> </div> <div class="panel-body"> <form role="form"> <div class='form-row'> <div class="col-xs-12 form-group"> <label class='control-label'>Name on Card</label> <input class="form-control" id="nameOnCard" type="text" value=""> </div> <div class="col-xs-12 form-group"> <label class='control-label'>Card Number</label> <input class="form-control" id="cardNumber" size="20" type='text' value=""> </div> <div class="col-xs-6 form-group"> <label class='control-label'>Zip Code</label> <input class="form-control" id="zipCode" size="6" type='text' value=""> </div> </div> <div class='form-row'> <div class='col-xs-4 form-group cvc required'> <label class='control-label'>CVC</label> <input id="CardCVC" class='form-control' placeholder='ex. 311' size='4' type='text' value=""> </div> <div class='col-xs-4 form-group expiration required'> <label class='control-label'>Expiration</label> <input class='form-control' id="expMonth" placeholder='MM' size='2' type='text' value=""> </div> <div class='col-xs-4 form-group expiration required'> <label class='control-label'> </label> <input class='form-control' id="expYear" placeholder='YY' size='2' type='text' value=""> </div> </div> <div class='form-row'> <div class='col-md-12 form-group'> <button class='form-control btn btn-primary' type='button' onClick="updateCreditCard();">Update</button> </div> </div> </form> </div> </div> </div> </div> </div> </body> </html>
有誰知道它為什么會發生？ 調試控制台中沒有錯誤。 當我使用我的電腦嘗試它時，代碼工作正常。
謝謝
1 個解決方案
解決方案1
2 已采納 2017-10-01 00:24:41
您沒有以正確的方式使用form group
我已經修好了
我只是改變了每個輸入表單的form-group ：
<div class='form-row'>
<div class="col-xs-12 form-group">
<label class='control-label'>Name on Card</label>
<input class="form-control" id="nameOnCard" type="text" value="">
</div>
<div class="col-xs-12 form-group">
<label class='control-label'>Card Number</label>
<input class="form-control" id="cardNumber" size="20" type='text' value="">
</div>
<div class="col-xs-6 form-group">
<label class='control-label'>Zip Code</label>
<input class="form-control" id="zipCode" size="6" type='text' value="">
</div>
</div>
是這樣的：
<div class="form-group col-md-12">
<label class='control-label'>Name on Card</label>
<input class="form-control" id="nameOnCard" type="text" value="">
</div>
<div class="form-group col-md-12">
<label class='control-label'>Card Number</label>
<input class="form-control" id="cardNumber" size="20" type='text' value="">
</div>
<div class="form-group col-md-12">
<label class='col-md-12 control-label'>Zip Code</label>
<input class="form-control" id="zipCode" size="6" type='text' value="">
</div>
每個輸入的form-group都是正確的，但最重要的是，有一個form-row ，沒有必要像提問者那樣制作。
<!DOCTYPE html> <htm> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content=""> <meta name="author" content=""> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title" align="center" style="display: inline;font-weight: bold;">Credit Card</h3> </div> <div class="panel-body"> <form > <div class="form-group col-md-12"> <label class='control-label'>Name on Card</label> <input class="form-control" id="nameOnCard" type="text" value=""> </div> <div class="form-group col-md-12 col-xs-12"> <label class='control-label'>Card Number</label> <input class="form-control" id="cardNumber" size="20" type='text' value=""> </div> <div class="form-group col-md-6 col-xs-12"> <label class='control-label'>Zip Code</label> <input class="form-control" id="zipCode" size="6" type='text' value=""> </div> <div class="form-group col-md-6 col-xs-12"> <label class='control-label'>CVC</label> <input id="CardCVC" class='form-control' placeholder='ex. 311' size='4' type='text' value=""> </div> <div class='form-group col-md-4 col-xs-12 expiration required'> <label class='control-label'>Expiration</label> <input class='form-control' id="expMonth" placeholder='MM' size='2' type='text' value=""> </div> <div class=' form-group col-md-6 col-xs-12 expiration required'> <label class='control-label'> </label> <input class='form-control' id="expYear" placeholder='YY' size='2' type='text' value=""> </div> <div class="form-group"> <button class="btn btn-primary col-md-12 col-xs-12" onClick="updateCreditCard();">Update</button> </div> </form> </div> </div> </div> </div> </div> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </html>
看看這個網站如何使用form group
表單控件中的Bootstrap輸入文本出現了一些不必要的空白
[英]Bootstrap input text in form-control is taking some unwanted margins
CSS-引導程序-將表單與導航欄中的表單控制輸入sm垂直對齊
[英]css - Bootstrap - Vertically align form with form-control input-sm in navbar
具有自定義填充的文本輸入上的Bootstrap 3表單控制類會在IE和FF中隱藏文本
[英]Bootstrap 3 form-control class on text input with custom padding hides text in IE and FF
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.