Bootstrap 3上的输入宽度

小编典典

Bootstrap 3上的输入宽度

css

再次更新：
我通过选择最上面的答案来结束这个问题，以防止人们在没有真正理解问题的情况下添加答案。实际上，如果不使用网格或添加额外的CSS，就无法通过内置功能来实现。例如，如果您要处理的help- block元素需要超出简短的输入，但它们是“内置”的，则网格将无法很好地工作。如果这是一个问题，我建议使用额外的CSS类，你可以在BS3讨论找到这里。现在BS4已经发布，可以使用包含的大小调整样式来进行管理，因此不再需要太长的时间了。感谢大家对这个流行的SO问题的良好投入。

更新： 这个问题仍然悬而未决，因为它是关于BS中的内置
功能来管理输入宽度而不求助于网格（有时必须独立管理）。我已经使用自定义类来管理它，所以这不是基本CSS的方法。该任务在BS功能讨论列表中，并且尚未解决。

原始问题： 有人想出一种在BS3上管理输入宽度的方法吗？我目前正在使用一些自定义类来添加该功能，但是我可能错过了一些未记录的选项。

当前的文档说使用.col-lg-x，但是显然不起作用，因为它只能应用于容器div，这会导致各种布局/浮动问题。

这是一个小提琴。奇怪的是，在小提琴上，我什至无法调整表单组的大小。

<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>

阅读 312

2020-05-16

共1个答案

小编典典

您想做的当然是可以实现的。

您想要的是将每个“组”包装成一行，而不是将整个表格仅包装成一行。这里：

<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>

请注意，在新的小提琴中，我还添加了’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)

有关更多信息，请参见Bootstrap3网格系统。我希望我很清楚，否则让我知道，我会详细说明。

2020-05-16