Question

我有一个带标签的简单bootstrap输入字段。我现在的问题是，当我将浏览器调整为较小的尺寸时，输入字段变得太窄，以至于它不会显示值＆＃34; 1.00＆＃34;。有没有办法可以定义输入字段的最小宽度？或者我做这件事的方式有问题吗？非常感谢！

<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>

Answer 1

您可以在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 */
}

Answer 2

您正在使用引导程序，因此您应该使用引导网格系统。

见下面的例子 -

＆＃13;

<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>

＆＃13;

如何设置bootstrap输入字段的最小宽度

2 个答案: