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

Html 如何减少bootstrap中输入类型的宽度,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我已经为表单编写了一个代码,但是我想在不破坏布局的情况下减小宽度,并且我无法更改输入字段的宽度 在减小尺寸的同时,标签变得不对齐 <head> <title>Add Customer</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="st

我已经为表单编写了一个代码,但是我想在不破坏布局的情况下减小宽度,并且我无法更改输入字段的宽度

在减小尺寸的同时,标签变得不对齐

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

添加客户
添加客户
姓名:
电邮:
公司:
评论:
提交

在给定的示例中,您使用了错误的css规则,就像使用了不正确的
width=“511px”
。您必须使用
style=“width:511px;”
。您可以使用内联css为输入字段提供自定义样式。看

我们不应该修改引导类样式,但是如果您有需求,可以修改

像这样
您可以重写引导类


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

在给定的示例中,您使用了错误的css规则,例如使用了不正确的
width=“511px”
。您必须使用
style=“width:511px;”
。您可以使用内联css为输入字段提供自定义样式。看

我们不应该修改引导类样式,但是如果您有需求,可以修改

像这样
您可以重写引导类


已更新我已将自定义宽度添加到输入框中,在文本区域中,您只能垂直调整大小。(用于测试)

由于您使用的是引导框架,我认为您可以使用网格系统相应地调整宽度

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

姓名:

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

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

姓名:


尝试使用display:block添加宽度;属性如果您想为输入字段指定自定义宽度,则删除表单控件类并指定自定义css。请看这里或看这个@Leothelion,我倾向于向表单控件类添加属性(在styles.css或类似版本中),而不是完全删除该类,这样您就不会丢失表单控件css中可能需要的其他内容。如果文件的加载顺序正确,则应用的任何样式都将覆盖默认引导CSS中的样式,但缺少丰富的外观。我需要同样的外观和感觉,但宽度要小一些。公司和评论字段与电子邮件和电话字段相比看起来不太好。@Lyall,thanx为我指出了这一点,但我在当前项目中使用了自定义类,我们不得不删除表单控件,因为它提供了100%的宽度。对不起,我忘了提到,如果您有要求,那么您应该删除。请尝试使用display:block添加宽度;属性如果您想为输入字段指定自定义宽度,则删除表单控件类并指定自定义css。请看这里或看这个@Leothelion,我倾向于向表单控件类添加属性(在styles.css或类似版本中),而不是完全删除该类,这样您就不会丢失表单控件css中可能需要的其他内容。如果文件的加载顺序正确,则应用的任何样式都将覆盖默认引导CSS中的样式,但缺少丰富的外观。我需要同样的外观和感觉,但宽度要小一些。公司和评论字段与电子邮件和电话字段相比看起来不太好。@Lyall,thanx为我指出了这一点,但我在当前项目中使用了自定义类,我们不得不删除表单控件,因为它提供了100%的宽度。对不起,我忘了提一下,如果你有要求,那么你应该删除。好的,这是正确的。但自定义样式不寻找公司和评论字段。我可以看到它们的宽度较小。我只是给他们定制了宽度。我不是说宽度要小。我是说文本框的边框看起来不像上面的Fieldssory,但对我来说,它们都是一样的。好的,谢谢,我没有看到你的更新答案。谢谢它的工作。。。class=“form control”style=“width:170px;”好的,这是正确的..但是自定义样式没有查找公司和注释字段..我可以看到它们的宽度较小。我只是给他们定制了宽度。我不是说宽度要小。我是说文本框的边框看起来不像上面的Fieldssory,但对我来说,它们都是一样的。好的,谢谢,我没有看到你的更新答案。谢谢它的工作。。。class=“form control”style=“宽度:170px;”