Question

我已经为表单编写了代码，但是我希望减小宽度而不会损坏布局，而且我无法更改输入字段的宽度。

虽然减少尺寸标签正在变得错位

<head>
   <title>Add Customer</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="jumbotron">
      <div class="container" style="color:green">
         <h2 align="center" style="color: blue">Add Customer</h2>
         <form role="form">
            <div class="form-group">
               <label for="CustomerName">Name:</label>
               <!--<input type="text" class="form-control" id="email" placeholder="Enter Customer Name" width ="511px">-->
               <input type="text" class="form-control" id="email" placeholder="Enter Customer Name" width ="511px">    
            </div>
            <div class="form-group">
               <label for="email">Email:</label>
               <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
               <input type="email" class="form-control" id="email" placeholder="Enter email">
            </div>
            <div class="form-group">
               <label for="pwd">Company:</label>
               <input type="text" class="form-control" id="pwd" placeholder="Enter Company Name">
            </div>
            <div class="form-group">
               <label for="pwd">Comment:</label>
               <textarea class="form-control" rows="5" id="comment" placeholder="Enter Comments"></textarea>
            </div>
            <button type="submit" class="btn btn-success">Submit</button>
         </form>
      </div>
   </div>
</body>

Answer 1

在您给出的示例中，您使用了错误的css规则，就像您使用的width="511px"一样，这是不正确的。你必须使用style="width:511px;"。您可以使用内联css为输入字段提供自定义样式。见here

我们不应该修改bootstrap类样式，但如果有要求，则可以。

像这样<input type="text" class="form-control" style="width:170px;" id="pwd" placeholder="Enter Company Name">你可以覆盖bootstrap类。

更新我在输入框中添加了自定义宽度，在文本区域中只能调整垂直大小。（用于测试）

Answer 2

由于您使用的是bootstrap框架，我认为您可以使用网格系统来响应性地调整宽度

<div class="col-md-6"> 
    <div class="form-group">
       <label for="CustomerName">Name:</label>
        <input type="text" class="form-control" id="email" placeholder="Enter Customer Name">    
     </div>
</div>

如何减少bootstrap中输入类型的宽度

2 个答案: