Bootstrap 3上的输入宽度
再次更新：我将通过选择顶部答案来结束此问题，以防止人们在没有真正理解问题的情况下添加答案。实际上，如果不使用网格或添加额外的css，就无法使用内置功能完成此任务。例如，如果您正在处理需要超出短输入的help-block元素，但这些元素是“内置”的，那么网格就不能很好地工作。如果这是一个问题，我建议使用额外的css类，您可以在BS3讨论here中找到这些类。现在BS4已经出来了，可以使用包含的sizing样式来管理它，所以这在很长一段时间内都不再重要了。感谢所有人对这个流行的SO问题的良好投入。
更新：这个问题仍然悬而未决，因为它是关于BS的内置功能，可以在不求助于网格的情况下管理输入宽度(有时它们必须独立管理)。我已经使用自定义类来管理这一点，所以这不是基本css的操作指南。这项任务在BS feature discussion list中，尚未解决。
原始问题：有人想出了在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>回答 17
Stack Overflow用户
发布于 2013-11-02 16:01:57
你想做的事情当然是可以实现的。
您想要的是将每个“组”包装在一行中，而不是只用一行包装整个表单。这里：
<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>我制作的新jsfiddle：NEW jsfiddle
请注意，在新的小提琴中，我还添加了‘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)有关详细信息，请参阅Bootstrap 3 grid system。我希望我说得很清楚，否则请让我知道，我会详细说明。
Stack Overflow用户
发布于 2014-06-03 14:48:54
在Bootstrap 3
您可以简单地创建自定义样式：
.form-control-inline {
min-width: 0;
width: auto;
display: inline;
}然后将其添加到表单控件中，如下所示：
<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>通过这种方式，您不必在HTML中添加额外的布局标记。
Stack Overflow用户
发布于 2015-04-24 23:09:28
ASP.net MVC转到Content- Site.css并删除或注释此行：
input,
select,
textarea {
/*max-width: 280px;*/
}https://stackoverflow.com/questions/18539711
复制相似问题