Bootstrap 3 上的输入宽度 - Input widths on Bootstrap 3

2021/12/01 08:37
阅读数 0


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.实际上,如果不使用网格或添加额外的 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'.例如,如果您正在处理需要超越简短输入但它们是“内置”的help-block元素,则网格不能很好地工作。 If that is an issue I recommend using extra css classes which you can find in the BS3 discussion here .如果这是一个问题,我建议使用额外的 css 类,您可以在此处的 BS3 讨论中找到 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.现在 BS4 出来了,可以使用包含的尺寸样式来管理这个,所以这不会再相关了。 Thanks all for good input on this popular SO question.感谢大家对这个流行的 SO 问题的良好投入。

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).更新:这个问题仍然悬而未决,因为它是关于 BS 中的内置功能来管理输入宽度而不诉诸网格(有时它们必须独立管理)。 I already use custom classes to manage this so this is not a how-to on basic css.我已经使用自定义类来管理它,所以这不是基本 css 的操作方法。 The task is in BS feature discussion list and has yet to be addressed.该任务在 BS功能讨论列表中,尚未解决。

Original Question: Anyone figure out a way to manage input width on BS 3?原始问题:有人想出一种方法来管理 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.当前文档说使用 .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 class="form-group col-lg-1 ">
        <label for="code">Email</label>
        <input type="text" class="form-control input-normal">

    <button type="submit" class="btn btn-default">Submit</button>


0 收藏
0 评论
0 收藏