Bootstrap 3上的输入宽度

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

更新: 这个问题仍然没有解决，因为这是关于 BS 中的 内置的功能，它可以管理输入宽度，而不需要使用网格(有时它们必须独立管理)。我已经使用自定义类来管理它，所以这不是一个基本的 css 操作指南。这项任务是在 BS 专题讨论表专题讨论表，尚未得到解决。

原始问题: 有人想出一个方法来管理 BS3的输入宽度吗？我目前正在使用一些自定义类来添加这个功能，但是我可能遗漏了一些没有文档说明的选项。

现在的医生说。Collg-x，但是这显然不起作用，因为它只能应用于容器 div，这会导致各种各样的布局/浮动问题。

这里有一个小提琴。奇怪的是，在小提琴上，我甚至不能让形状组调整大小。

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>
513483 次浏览
小开 
<div class="form-group col-lg-4">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>

将类添加到 form.group 以约束输入

小开

我认为您需要将输入包装在 col-lg-4中，然后包装在 form-group中，所有输入都包含在 form-horizontal中。.

    <form class="form form-horizontal">
<div class="form-group">
<div class="col-md-3">
<label>Email</label>
<input type="email" class="form-control" id="email" placeholder="email">
</div>
</div>
...
</form>

Bootplyhttp://bootply.com/78156演示

编辑: 来自 Bootstrap 3 docs. 。

默认情况下，Bootstrap 中的输入、选择和文本区域的宽度为100% 。若要使用内联窗体，必须在内部使用的窗体控件上设置宽度。

因此，另一种选择是使用 CSS 设置特定的宽度:

.form-control {
width:100px;
}

或者，将 col-sm-*应用到“ form-group”。

小开
最佳答案

你想做的肯定是可以实现的。

您需要的是将每个“组”包装在一行中，而不是仅用一行包装整个表单:

<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: 新的 jsfiddle

请注意，在新的小提琴中，我还添加了“ colxs-5”，这样您也可以在较小的屏幕中看到它——删除它们没有任何区别。但是请记住，在您的原始类中，您只使用了“ collg-1”。这意味着如果屏幕宽度小于“ lg”媒体查询大小，则使用默认块行为。基本上，通过只应用“ collg-1”，你所使用的逻辑是:

IF SCREEN WIDTH < 'lg' (1200px by default)


USE DEFAULT BLOCK BEHAVIOUR (width=100%)


ELSE


APPLY 'col-lg-1' (~95px)

更多信息见 引导3网格系统。我希望我说得很清楚，否则让我知道，我会详细说明。

小开

在引导3中

所有 text < input > 、 < textarea > 和 < select > 元素都具有。窗体控件的宽度设置为: 100% ; 默认情况下。

Http://getbootstrap.com/css/#forms-example

在某些情况下，我们似乎必须手动设置输入的最大宽度。

不管怎样，你的例子很管用。只要用大屏幕检查一下，就可以看到名称和电子邮件字段得到了 with (collg-1 + collg-1，有12列)的2/12。但是如果屏幕较小(只需调整浏览器大小) ，输入将扩展到行的末尾。

小开

在引导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 中的布局添加额外的标记。

小开

如果您只是想简单地减少或增加 Bootstrap 的输入元素的宽度，那么我会在 CSS 中使用 max-width。

下面是我创建的一个非常简单的例子:

    <form style="max-width:500px">


<div class="form-group">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>


<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email Address">
</div>


<div class="form-group">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>


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

我已经将整个窗体的最大宽度设置为500px。这样，您就不需要使用任何 Bootstrap 的网格系统，而且它还可以保持表单的响应性。

小开

当前的文档说要使用. colxs-x，没有 lg。 然后我试了试小提琴，似乎奏效了:

Http://jsfiddle.net/tx3ae/225/

为了保持布局，你可以像这样改变类“ row”的位置:

<div class="container">
<h1>My form</h1>
<p>How to make these input fields small and retain the layout.</p>
<div class="row">
<form role="form" class="col-xs-3">


<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" >
</div>


<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email">
</div>


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

Http://jsfiddle.net/tx3ae/226/

小开

你不必放弃简单的 css:)

.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">
小开

Net MVC 转到 Content-Site.css 并删除或注释这一行:

input,
select,
textarea {
/*max-width: 280px;*/
}
小开

同样的问题也困扰着我，这就是我的解决办法。

HTML 源码

<div class="input_width">
<input type="text" class="form-control input-lg" placeholder="sample">
</div>

用另一个 div 类覆盖输入代码

CSS 源码

.input_width{
width: 450px;
}

在覆盖的 div 类上给出任何宽度或边距设置。

Bootstrap 的输入宽度总是默认为100% ，所以宽度遵循覆盖宽度。

这不是最好的方法，而是我解决这个问题的最简单也是唯一的方法。

希望这个有帮助。

小开

Bootstrap 3我使用以下方法得到了一个很好的响应式表单布局:

<div class="row">
<div class="form-group  col-sm-4">
<label for=""> Date</label>
<input type="date" class="form-control" id="date" name="date" placeholder=" date">
</div>


<div class="form-group  col-sm-4">
<label for="hours">Hours</label>
<input type="" class="form-control" id="hours" name="hours" placeholder="Total hours">
</div>
</div>
小开

我知道这是一个老线程，但是我在内联表单中遇到了同样的问题，上面的选项都没有解决这个问题。所以我像这样修改了内联表单:-

<form class="form-inline" action="" method="post" accept-charset="UTF-8">
<div class="row">
<div class="form-group col-xs-7" style="padding-right: 0;">
<label class="sr-only" for="term">Search</label>
<input type="text" class="form-control" style="width: 100% !important;" name="term" id="term" placeholder="Search..." autocomplete="off">
<span class="help-block">0 results</span>
</div>
<div class="form-group col-xs-2">
<button type="submit" name="search" class="btn btn-success" id="search">Search</button>
</div>
</div>
</form>

这就是我的解决方案，有点笨拙，但是用内联表单完成了任务。

小开

我不知道为什么每个人似乎都忽略了 Content 文件夹中的 site.css 文件。查看此文件中的第22行，您将看到要控制的输入的设置。您的站点似乎没有引用此样式表。

我补充说:

input, select, textarea { max-width: 280px;}

你的小提琴，它工作得很好。

永远不要更新 bootstrap.css 或 bootstrap.min.css。这样做将使您在更新引导程序时失败。这就是包含 site.css 文件的原因。在这里，您可以对站点进行更改，从而仍然可以获得所需的响应式设计。

这是它工作的小提琴

小开

您可以添加 style 属性，也可以在 css 文件中添加 input 标记的定义。

选项1: 添加 style 属性

<input type="text" class="form-control" id="ex1" style="width: 100px;">


备选案文2: css 中的定义

input{
width: 100px
}

您可以在自动更改100px

希望我能帮上忙。

小开

如果你在利用血祖。在 Visual Studio 15中的 Site 模板中，基本项目具有“ Site.css”，它覆盖了表单控件字段的宽度。

我不能让我的文本框的宽度得到任何宽度超过300像素宽。我什么方法都试过了，都没用。我发现 Site.css 中有一个设置导致了这个问题。

摆脱它，你就可以控制你的字段宽度。

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
max-width: 280px;
}
小开

将 style=""的术语添加并定义到输入字段中，这是最简单的方法: 例如:

<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" style="width:200px;">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" style="width:200px">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
小开

Bootstrap 使用类“ form-input”来控制“ input fields”的属性。简单地说，在 css 文件或头部添加自己的‘ form-input’类，并使用所需的宽度、边框、文本大小等。

(或者，直接在 body 部分的 input 属性中添加 size =’5’内联代码。)

<script async src="//jsfiddle.net/tX3ae/embed/"></script>

提交答案