Bootstrap 3上的input宽度
再次更新：我通过select最高的答案来closures这个问题，以防止人们添加答案而不真正理解问题。 实际上，没有办法使用构buildfunction来完成，而不使用网格或添加额外的CSS。 如果你正在处理的help-block元素需要超出一个简短的input，例如，但他们是“内置”，网格不能正常工作。 如果这是一个问题，我build议使用额外的CSS类，你可以在这里的BS3讨论中find 。 现在，BS4已经不在了，可以使用包含的大小样式来pipe理这个，所以这不会长久相关。 感谢所有在这个受欢迎的SO问题上的良好input。
更新：这个问题仍然是开放的，因为它是关于BS中的内置function来pipe理input宽度而不依靠网格（有时它们必须被独立pipe理）。 我已经使用自定义类来pipe理这个，所以这不是基本的CSS的一个方法。 这个任务是在BS function讨论列表中 ，还有待解决。
原问题：有人找出一种方法来pipe理BS 3上的input宽度吗？ 我目前正在使用一些自定义类来添加function，但我可能错过了一些没有logging的选项。
目前的文档说使用.col-lg-x，但显然不工作，因为它只能适用于容器div，然后导致各种布局/浮动问题。
这是一个小提琴。 奇怪的是，在小提琴我甚至无法得到的forms组来resize。
http://jsfiddle.net/tX3ae/
<form role="form" class="row"> <div class="form-group col-lg-1"> <label for="code">Name</label> <input type="text" class="form-control"> </div> <div class="form-group col-lg-1 "> <label for="code">Email</label> <input type="text" class="form-control input-normal"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div>
你想要做什么是可以实现的。
你想要的是将每个“组”包装成一行，而不是只有一行。 这里：
<div class="container"> <h1>My form</h1> <p>How to make these input fields small and retain the layout.</p> <form role="form"> <div class="row"> <div class="form-group col-lg-1"> <label for="code">Name</label> <input type="text" class="form-control" /> </div> </div> <div class="row"> <div class="form-group col-lg-1 "> <label for="code">Email</label> <input type="text" class="form-control input-normal" /> </div> </div> <div class="row"> <button type="submit" class="btn btn-default">Submit</button> </div> </form> </div>
新的jsfiddle我做了： 新的jsfiddle
请注意，在新的小提琴中，我还添加了“col-xs-5”，以便您可以在较小的屏幕上看到它 – 删除它们没有任何区别。 但请记住，在原来的课程中，您只能使用“col-lg-1”。 这意味着如果屏幕宽度小于“lg”媒体查询大小，则使用默认的块行为。 基本上只应用“col-lg-1”，你使用的逻辑是：
IF SCREEN WIDTH < 'lg' (1200px by default) USE DEFAULT BLOCK BEHAVIOUR (width=100%) ELSE APPLY 'col-lg-1' (~95px)
有关更多信息，请参阅Bootstrap 3网格系统 。 我希望我很清楚，否则让我知道，我会详细说明。
在Bootstrap 3
您可以简单地创build一个自定义样式：
.form-control-inline { min-width: 0; width: auto; display: inline; }
然后添加它来形成像这样的控制：
<div class="controls"> <select id="expirymonth" class="form-control form-control-inline"> <option value="01">01 - January</option> <option value="02">02 - February</option> <option value="03">03 - March</option> <option value="12">12 - December</option> </select> <select id="expiryyear" class="form-control form-control-inline"> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> </select> </div>
这样，您不必为HTML中的布局添加额外的标记。
ASP.net MVC转到Content- Site.css并删除或注释以下行：
input, select, textarea { /*max-width: 280px;*/ }
我想你需要把input包裹在col-lg-4里面，然后在form-group里面，它们都被包含在一个form-horizontal 。
<form class="form form-horizontal"> <div class="form-group"> <div class="col-md-3"> <label>Email</label> <input type="email" class="form-control" id="email" placeholder="email"> </div> </div> ... </form>
在Bootply上演示 – http://bootply.com/78156
编辑：从Bootstrap 3文档..
在Bootstrap中，默认情况下，input，select和textareas都是100％的宽度。 要使用内联表单，您必须在内部使用的表单控件上设置宽度。
所以另一个select是使用CSS设置一个特定的宽度：
.form-control { width:100px; }
或者，将col-sm-*应用于“form-group”。
当前的文档说使用.col-xs-x，没有lg。 然后我试着小提琴，它似乎工作：
http://jsfiddle.net/tX3ae/225/
保持布局，也许你可以改变你把类放在“行”这样的地方：
<div class="container"> <h1>My form</h1> <p>How to make these input fields small and retain the layout.</p> <div class="row"> <form role="form" class="col-xs-3"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" name="name" > </div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" id="email" name="email"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div>
<div class="form-group col-lg-4"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div>
将该类添加到form.group中以约束input
如果您在Visual Studio 15中使用Master.Site模板，则基础项目具有“Site.css”，它覆盖了表单控件字段的宽度。
我无法得到我的文本框宽度得到任何宽度大约300像素宽。 我尝试了一切，没有任何工作。 我发现在Site.css中有一个导致问题的设置。
摆脱这一点，你可以控制你的领域的宽度。
/* Set widths on the form inputs since otherwise they're 100% wide */ input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="select"] { max-width: 280px; }
我知道这是一个古老的线程，但我遇到了与内联表单相同的问题，并没有上述选项解决了这个问题。 所以我修改了我的内联表单，如下所示：
<form class="form-inline" action="" method="post" accept-charset="UTF-8"> <div class="row"> <div class="form-group col-xs-7" style="padding-right: 0;"> <label class="sr-only" for="term">Search</label> <input type="text" class="form-control" style="width: 100% !important;" name="term" id="term" placeholder="Search..." autocomplete="off"> <span class="help-block">0 results</span> </div> <div class="form-group col-xs-2"> <button type="submit" name="search" class="btn btn-success" id="search">Search</button> </div> </div> </form>
这是我的解决scheme。 有点hacky黑客，但做了一个内联forms的工作。
在Bootstrap 3
所有具有.form-control的文本<input>，<textarea>和<select>元素都设置为width：100％; 默认。
http://getbootstrap.com/css/#forms-example
看起来，在某些情况下，我们必须手动设置input的最大宽度。
无论如何，你的例子工作。 只需用大屏幕查看，就可以看到名称和电子邮件字段正在获取（col-lg-1 + col-lg-1，您有12列）的2/12。 但是，如果你有一个更小的屏幕（只是调整浏览器），input将扩大，直到行的末尾。
你不必放弃简单的CSS 🙂
.short { max-width: 300px; } <input type="text" class="form-control short" id="...">
你可以添加样式属性，或者你可以在一个css文件中为input标签添加一个定义。
选项1：添加样式属性
<input type="text" class="form-control" id="ex1" style="width: 100px;">
选项2：在CSS中定义
input{ width: 100px }
你可以在auto中改变100px
我希望我能帮上忙。
如果你只是想减less或增加Bootstrap的input元素的宽度，我会在CSS中使用max-width 。
这是我创build的一个非常简单的例子：
<form style="max-width:500px"> <div class="form-group"> <input type="text" class="form-control" id="name" placeholder="Name"> </div> <div class="form-group"> <input type="email" class="form-control" id="email" placeholder="Email Address"> </div> <div class="form-group"> <textarea class="form-control" rows="5" placeholder="Message"></textarea> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>
我已经将整个窗体的最大宽度设置为500px。 这样你就不需要使用任何Bootstrap的网格系统，它也将保持forms的响应。
我也遇到了同样的问题，这是我的解决scheme。
HTML源代码
<div class="input_width"> <input type="text" class="form-control input-lg" placeholder="sample"> </div>
用另一个div类覆盖input代码
CSS源码
.input_width{ width: 450px; }
在覆盖的div类上给出任何宽度或边距设置。
Bootstrap的input宽度总是默认为100％，所以宽度跟随覆盖宽度。
这不是最好的方法，但是最简单和唯一的解决scheme就是我解决了这个问题。
希望这有助于。
引导3我使用以下方法实现了一个很好的响应表单布局：
<div class="row"> <div class="form-group col-sm-4"> <label for=""> Date</label> <input type="date" class="form-control" id="date" name="date" placeholder=" date"> </div> <div class="form-group col-sm-4"> <label for="hours">Hours</label> <input type="" class="form-control" id="hours" name="hours" placeholder="Total hours"> </div> </div>
我不知道为什么每个人都忽视了Content文件夹中的site.css文件。 看这个文件中的第22行，你会看到input的设置被控制。 这似乎是你的网站没有引用这个样式表。
我加了这个：
input, select, textarea { max-width: 280px;}
到你的小提琴，它工作得很好。
永远不要更新bootstrap.css或bootstrap.min.css。 这样做会使您在引导程序更新时失败。 这就是为什么包含site.css文件的原因。 这是您可以对网站进行更改的地方，它仍将为您提供所需的响应式devise。
这是它的工作的小提琴
为input字段添加和定义style=""术语，这是最简单的方法：例如：
<form> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" id="email" style="width:200px;"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" style="width:200px"> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
Bootstrap使用“form-input”类来控制“input字段”的属性。 简单地说，在你的css文件或head部分添加你想要的宽度，边框，文本大小等你自己的“表单input”类。
（或者直接在body部分的input属性中添加size ='5'内联代码）。
<script async src="//jsfiddle.net/tX3ae/embed/"></script>
