CSS Bootstrap 3 上的输入宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18539711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input widths on Bootstrap 3
提问by cyberwombat
Update again:I am closing this question by selecting the top answer to keep people from adding answers without really understanding the question. In reality there is no way to do it with the build in functionality without using grid or adding extra css. Grids do not work well if you are dealing with help-blockelements that need to go beyond a short input for example but they are 'build-in'. If that is an issue I recommend using extra css classes which you can find in the BS3 discussion here. Now that BS4 is out it is possible to use the included sizingstyles to manage this so this is not going to be relevant for much longer. Thanks all for good input on this popular SO question.
再次更新：我通过选择最佳答案来结束这个问题，以防止人们在没有真正理解问题的情况下添加答案。实际上，如果不使用网格或添加额外的 css，就无法通过内置功能来实现。例如，如果您处理的help-block元素需要超出短输入范围，但它们是“内置”的，则网格不能很好地工作。如果这是一个问题，我建议使用额外的 css 类，您可以在此处的 BS3 讨论中找到。现在 BS4 出来了，可以使用包含的尺寸样式来管理这个，所以这不会再相关了。感谢大家对这个流行的 SO 问题的良好投入。
Update:This question remains open because it is about built-infunctionality in BS to manage input width without resorting to grid (sometimes they have to be managed independently). I already use custom classes to manage this so this is not a how-to on basic css. The task is in BS feature discussion listand has yet to be addressed.
更新：这个问题仍然悬而未决，因为它是关于BS 中的内置功能来管理输入宽度而不诉诸网格（有时它们必须独立管理）。我已经使用自定义类来管理它，所以这不是基本 css 的操作方法。该任务在 BS功能讨论列表中，尚未解决。
Original Question:Anyone figure out a way to manage input width on BS 3? I'm currently using some custom classes to add that functionality but I may have missed some non documented options.
原始问题：有人想出一种方法来管理 BS 3 上的输入宽度吗？我目前正在使用一些自定义类来添加该功能，但我可能错过了一些未记录的选项。
Current docs say to use .col-lg-x but that clearly doesn't work as it can only be applied to the container div which then causes all kinds of layout/float issues.
当前文档说使用 .col-lg-x 但这显然不起作用，因为它只能应用于容器 div，然后导致各种布局/浮动问题。
Here's a fiddle. Weird is that on the fiddle I can't even get the form-group to resize.
这是一个小提琴。奇怪的是，在小提琴上我什至无法让表单组调整大小。
<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>
采纳答案by shadowf
What you want to do is certainly achievable.
你想做的事肯定是可以实现的。
What you want is to wrap each 'group' in a row, not the whole form with just one row. Here:
您想要的是将每个“组”包装成一行，而不是整个表单只有一行。这里：
<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>
The NEW jsfiddle I made: NEW jsfiddle
我制作的新 jsfiddle： 新 jsfiddle
Note that in the new fiddle, I've also added 'col-xs-5' so you can see it in smaller screens too - removing them makes no difference. But keep in mind in your original classes, you are only using 'col-lg-1'. That means if the screen width is smaller than the 'lg' media query size, then the default block behaviour is used. Basically by only applying 'col-lg-1', the logic you're employing is:
请注意，在新的小提琴中，我还添加了“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)
See Bootstrap 3 grid systemfor more info. I hope I was clear otherwise let me know and I'd elaborate.
有关更多信息，请参阅Bootstrap 3 网格系统。我希望我很清楚，否则让我知道，我会详细说明。
回答by George Filippakos
In Bootstrap 3
在 Bootstrap 3 中
You can simply create a custom style:
您可以简单地创建自定义样式：
.form-control-inline {
min-width: 0;
width: auto;
display: inline;
}
Then add it to form controls like so:
然后将其添加到表单控件中，如下所示：
<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>
This way you don't have to put extra markup for layout in your HTML.
这样您就不必在 HTML 中为布局添加额外的标记。
回答by user2648846
ASP.net MVC go to Content- Site.css and remove or comment this line:
ASP.net MVC 转到 Content-Site.css 并删除或注释此行：
input,
select,
textarea {
/*max-width: 280px;*/
}
回答by Zim
I think you need to wrap the inputs inside a col-lg-4, and then inside the form-groupand it all gets contained in a form-horizontal..
我认为您需要将输入包裹在 a 中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>
Demo on Bootply - http://bootply.com/78156
Bootply 上的演示 - http://bootply.com/78156
EDIT:From the Bootstrap 3 docs..
编辑：来自 Bootstrap 3 文档..
Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
Bootstrap 中的输入、选择和文本区域默认为 100% 宽。要使用内联表单，您必须在其中使用的表单控件上设置宽度。
So another option is to set a specific width using CSS:
所以另一个选择是使用 CSS 设置特定的宽度：
.form-control {
width:100px;
}
Or, apply the col-sm-*to the `form-group'.
或者，将 应用于col-sm-*“表单组”。
回答by Ced
Current docs say to use .col-xs-x , no lg. Then I try in fiddle and it's seem to work :
当前文档说使用 .col-xs-x ，没有 lg。然后我尝试小提琴，它似乎有效：
http://jsfiddle.net/tX3ae/225/
http://jsfiddle.net/tX3ae/225/
to keep the layout maybe you can change where you put the class "row" like this :
为了保持布局，也许您可以像这样更改放置类“行”的位置：
<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>
回答by BetoCuevas
<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>
Add the class to the form.group to constraint the inputs
将类添加到 form.group 以约束输入
回答by Joe Schmucker
If you are using the Master.Site template in Visual Studio 15, the base project has "Site.css" which OVERRIDES the width of form-control fields.
如果您在 Visual Studio 15 中使用 Master.Site 模板，则基础项目具有“Site.css”，它会覆盖表单控件字段的宽度。
I could not get the width of my text boxes to get any wider than about 300px wide. I tried EVERYTHING and nothing worked. I found that there is a setting in Site.css which was causing the problem.
我无法让我的文本框的宽度超过大约 300 像素的宽度。我尝试了一切，但没有任何效果。我发现 Site.css 中有一个设置导致了问题。
Get rid of this and you can get control over your field widths.
摆脱这个，你可以控制你的字段宽度。
/* 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;
}
回答by Daan Witte
You can add the style attribute or you can add a definition for the input tag in a css file.
您可以添加 style 属性，也可以在 css 文件中为 input 标记添加定义。
Option 1: adding the style attribute
选项 1：添加样式属性
<input type="text" class="form-control" id="ex1" style="width: 100px;">
Option 2: definition in css
选项 2：在 css 中定义
input{
width: 100px
}
You can change the 100px in auto
您可以在 auto 中更改 100px
I hope I could help.
我希望我能帮上忙。
回答by mattauckland
I know this is an old thread, but I experienced the same issue with an inline form, and none of the options above solved the issue. So I fixed my inline form like so:-
我知道这是一个旧线程，但是我在使用内联表单时遇到了同样的问题，并且上述选项都没有解决该问题。所以我像这样修复了我的内联表单：-
<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>
That was my solution. Bit hacky hack, but did the job for an inline form.
那是我的解决方案。有点hacky hack，但为内联表单做了工作。
回答by José Antonio Postigo
In Bootstrap 3
在 Bootstrap 3 中
All textual < input >, < textarea >, and < select > elements with .form-control are set to width: 100%; by default.
所有带有 .form-control 的文本 <input>、<textarea> 和 <select> 元素都设置为 width:100%；默认情况下。
http://getbootstrap.com/css/#forms-example
http://getbootstrap.com/css/#forms-example
It seems, in some cases, we have to set manually the max width we want for the inputs.
在某些情况下，我们似乎必须手动设置输入所需的最大宽度。
Anyway, your example works. Just check it with a large screen, so you can see the name and email fields are getting the 2/12 of the with (col-lg-1 + col-lg-1 and you have 12 columns). But if you have a smaller screen (just resize your browser), the inputs will expand until the end of the row.
无论如何，您的示例有效。只需用大屏幕检查一下，您就可以看到姓名和电子邮件字段是 with 的 2/12（col-lg-1 + col-lg-1，您有 12 列）。但是如果你有一个较小的屏幕（只需调整浏览器的大小），输入将扩展到行的末尾。
