Bootstrap 3上的输入宽度 [英] Input widths on Bootstrap 3
问题描述
更新：此问题仍然保持打开，因为它是关于BS内的功能，以管理输入宽度，而不诉诸网格（有时他们必须独立管理） 。我已经使用自定义类来管理这个，所以这不是一个基本的CSS的操作方法。任务位于BS 功能讨论列表中，尚未解决。
原始问题：
任何人都想出一种方法来管理BS 3上的输入宽度？我目前使用一些自定义类来添加该功能，但我可能错过了一些非文档选项。
当前文档说使用.col-lg-x，但显然不工作，因为它只能应用于容器div，然后导致各种布局/浮动问题。
这是一个小提琴。很奇怪的是，在小提琴上，我甚至不能得到表格组来调整大小。
< form role =formclass = row>
< div class =form-group col-lg-1>
< label for =code> Name< / label>
< input type =textclass =form-control>
< / div>
< div class =form-group col-lg-1>
< label for =code>电子邮件< / label>
< input type =textclass =form-control input-normal>
< / div>
< button type =submitclass =btn btn-default>提交< / button>
< / form>
< / div>
你想做什么是可以实现的。 p>
你想要的是将每个组包裹在一行中，而不是整个表单只包含一行。这里：
< div class =container>
< h1>我的表单< / h1>
< p>如何使这些输入字段较小并保留布局。< / p>
< form role =form>
< div class =row>
< div class =form-group col-lg-1>
< label for =code> Name< / label>
< input type =textclass =form-control/>
< / div>
< / div>
< div class =row>
< div class =form-group col-lg-1>
< label for =code>电子邮件< / label>
< input type =textclass =form-control input-normal/>
< / div>
< / div>
< div class =row>
< button type =submitclass =btn btn-default>提交< / button>
< / div>
< / form>
< / div>
我创建的new jsfiddle：
NEW jsfiddle
请注意，在新的小提琴中，我还添加了col-xs-5它在较小的屏幕也 - 删除他们没有什么区别。但是请记住，在你原来的类，你只使用col-lg-1。这意味着如果屏幕宽度小于lg媒体查询大小，则使用默认块行为。基本上通过只应用col-lg-1，你所使用的逻辑是：
如果屏幕宽度< 'lg'（默认为1200像素）
使用默认块行为（width = 100％）
ELSE
APPLY'col-lg-1 '（〜95px）
请参阅 Bootstrap 3网格系统了解更多信息。我希望我明白，否则让我知道，我会详细说明。
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.
<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屋！
