Bootstrap 3 上的输入宽度
[英] Input widths on Bootstrap 3
本文介绍了Bootstrap 3 上的输入宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
再次更新:我通过选择最佳答案来结束这个问题，以防止人们在没有真正理解问题的情况下添加答案.实际上，如果不使用网格或添加额外的 css，就无法通过内置功能来实现.例如，如果您正在处理需要超出简短输入的 help-block 元素但它们是内置"的，则网格无法正常工作.如果这是一个问题，我建议您使用额外的 css 类，您可以在 here.现在 BS4 出来了，可以使用包含的 sizing 样式来管理这个这将不再重要.感谢大家对这个流行的 SO 问题的良好投入.
更新:这个问题仍然悬而未决，因为它是关于 BS 中的内置功能来管理输入宽度而不诉诸网格(有时它们必须独立管理).我已经使用自定义类来管理它，所以这不是基本 css 的操作方法.该任务在 BS 功能讨论列表中，尚未得到解决.
原始问题:有人想出一种方法来管理 BS 3 上的输入宽度吗?我目前正在使用一些自定义类来添加该功能，但我可能错过了一些未记录的选项.
当前文档说使用 .col-lg-x 但这显然不起作用，因为它只能应用于容器 div，然后会导致各种布局/浮动问题.
这是一个小提琴.奇怪的是，在小提琴上我什至无法让表单组调整大小.
http://jsfiddle.net/tX3ae/
<div class="form-group col-lg-1"><label for="code">电子邮件</label><input type="text" class="form-control input-normal">
<button type="submit" class="btn btn-default">提交</button></表单>
解决方案
你想做的当然是可以实现的.
您想要的是将每个组"包装成一行，而不是将整个表格包装成一行.这里:
<h1>我的表单</h1><p>如何使这些输入字段变小并保持布局.</p><表单角色=表单"><div class="row"><div class="form-group col-lg-1"><label for="code">名称</label><input type="text" class="form-control"/>
<div class="row"><div class="form-group col-lg-1"><label for="code">电子邮件</label><input type="text" class="form-control input-normal"/>
<div class="row"><button type="submit" class="btn btn-default">提交</button>
</表单>
我制作的新 jsfiddle:新的jsfiddle
请注意，在新的 fiddle 中，我还添加了col-xs-5"，因此您也可以在较小的屏幕上看到它 - 删除它们没有任何区别.但请记住，在您原来的课程中，您只使用了col-lg-1".这意味着如果屏幕宽度小于 'lg' 媒体查询大小，则使用默认块行为.基本上只应用'col-lg-1'，你使用的逻辑是:
IF 屏幕宽度 <'lg'(默认为 1200px)使用默认块行为(宽度=100%)别的应用'col-lg-1'(~95px)
有关详细信息，请参阅Bootstrap 3 网格系统.我希望我说清楚了，否则让我知道，我会详细说明.
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-block elements 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 sizing styles to manage this so this is not going to be relevant for much longer. Thanks all for good input on this popular SO question.
Update: This question remains open because it is about built-in functionality 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 list and has yet to be addressed.
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.
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.
Here's a fiddle. Weird is that on the fiddle I can't even get the form-group to 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>
解决方案
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
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:
IF SCREEN WIDTH < 'lg' (1200px by default)
USE DEFAULT BLOCK BEHAVIOUR (width=100%)
ELSE
APPLY 'col-lg-1' (~95px)
See Bootstrap 3 grid system for more info. I hope I was clear otherwise let me know and I'd elaborate.
这篇关于Bootstrap 3 上的输入宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
