Question

再次更新：我正在通过选择最佳答案来结束这个问题，以阻止人们在不理解问题的情况下添加答案。实际上，没有使用网格或添加额外的CSS，无法使用内置功能。如果您正在处理需要超出短输入的help-block元素，但它们是“内置”，则网格不能很好地工作。如果这是一个问题，我建议您使用额外的CSS课程，您可以在BS3讨论中找到here。现在BS4已经出局了，可以使用包含的sizing样式来管理它，这样就不会有更长的时间了。感谢所有人对这个流行的SO问题的良好意见。

更新：这个问题仍然存在，因为它是关于BS中的内置功能，无需借助网格来管理输入宽度（有时必须独立管理）。我已经使用自定义类来管理这个，所以这不是基本css的方法。任务在BS feature discussion list，尚未得到解决。

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

当前的文档说使用.col-lg-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>

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

我做的新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。我希望我很清楚，否则让我知道，我会详细说明。

Answer 2

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

Answer 3

ASP.net MVC转到Content- Site.css并删除或评论此行：

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

Answer 4

我认为你需要将输入包装在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>

Bootply演示 - http://bootply.com/78156

编辑：来自Bootstrap 3文档..

默认情况下，Bootstrap中的输入，选择和textareas是100％宽。要使用内联表单，您必须在其中使用的表单控件上设置宽度。

另一个选择是使用CSS设置特定的宽度：

.form-control {
    width:100px;
}

或者，将col-sm-*应用于`form-group'。

Answer 5

目前的文档说使用.col-xs-x，没有lg。然后我尝试小提琴它似乎工作：

http://jsfiddle.net/tX3ae/225/

要保持布局，也许你可以改变你放置课程的位置＆＃34; row＆＃34;像这样：

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

Answer 6

<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以约束输入

Answer 7

如果在Visual Studio 15中使用Master.Site模板，则基础项目具有“Site.css”，其覆盖了表单控件字段的宽度。

我的文本框宽度不能超过300px宽。我尝试了一切，没有任何效果。我发现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;
}

Answer 8

我知道这是一个旧线程，但我遇到了内联表单的相同问题，上面没有一个选项解决了这个问题。所以我修改了我的内联形式： -

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

这是我的解决方案。有点hacky hack，但是以内联形式完成了工作。

Answer 9

在Bootstrap 3中

所有文字＆lt;输入＆gt;，＆lt; textarea＆gt;，＆lt;选择＆gt; .form-control的元素设置为width：100％;默认情况下。

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

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

无论如何，你的例子有效。只需用大屏幕检查它，这样你就可以看到名称和电子邮件字段正在获得2/12（col-lg-1 + col-lg-1，你有12列）。但是如果你有一个较小的屏幕（只是调整浏览器的大小），输入将会扩展到行的末尾。

Answer 10

你不必放弃简单的css：）

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

Answer 11

您可以添加样式属性，也可以在css文件中添加输入标记的定义。

选项1：添加样式属性

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

选项2：css中的定义

input{
  width: 100px
}

您可以在自动

中更改100px

我希望我能提供帮助。

Answer 12

如果您希望根据自己的喜好简单地减少或增加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的网格系统，它也会保持表单的响应。

Answer 13

我也在努力解决同样的问题，这是我的解决方案。

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％，因此宽度跟随覆盖的宽度。

这不是最好的方法，但是解决问题的最简单且唯一的解决方案。

希望这会有所帮助。

Answer 14

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>

Answer 15

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

我补充说：

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

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

您永远不应该更新bootstrap.css或bootstrap.min.css。这样做会使引导程序更新时失败。这就是包含site.css文件的原因。您可以在此处对网站进行更改，这仍然可以为您提供所需的响应式设计。

Here is the fiddle with it working

Answer 16

在输入字段中添加和定义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>

Answer 17

Bootstrap使用类＆＃39;表单输入＆＃39;用于控制输入字段的属性＆＃39;。只需添加您自己的表单输入＆＃39;在css文件或head部分中具有所需宽度，边框，文本大小等的类。

（或者，直接在正文部分的输入属性中添加size =＆＃39; 5＆＃39;内联代码。）

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

Bootstrap 3上的输入宽度

17 个答案:

Bootply演示 - http://bootply.com/78156