ラベル付きの簡単なブートストラップ入力フィールドがあります。私の問題は、ブラウザを小さなサイズにリサイズすると、入力フィールドが狭すぎて値 "1.00"が表示されないということです。その入力フィールドの最小幅を定義する方法はありますか？それとも私がやっているやり方に何か問題がありますか？どうもありがとう！ブートストラップ入力フィールドの最小幅の設定方法
<div class="container">
<div class="input-group">
<span class="text-center input-group-addon" id="sizing-addon2">Payment mount</span>
<input class="form-control" type="text" id="payment_amount" value="1.00">
</div>
</div>
あなたのCSSで以下のコードを使用することができます。
.container input {
min-width: 320px; /* depends how much minimum width you require */
}
動作しない場合は、idでアクセスしてみてください。
#payment_amount {
min-width: 320px; /* depends how much minimum width you require */
}
ブートストラップを使用しているため、ブートストラップグリッドシステムを使用する必要があります。
以下example--
<html>
<head>
<meta charset="UTF-8">
<title>Secure Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="input-group">
<span class="text-center input-group-addon" id="sizing-addon2">Payment mount</span>
<input class="form-control col-lg-8 col-md-10 col-sm-12 col-xs-12" type="text" id="payment_amount" value="1.00">
</div>
</div>
</body>
</html>