Bootstrap 3上的输入宽度

Question

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

更新:这个问题仍然存在,因为它是关于BS中的内置功能来管理输入宽度而不依赖于网格(有时它们必须独立管理).我已经使用自定义类来管理这个,所以这不是基本css的操作方法.该任务在BS 功能讨论列表中,尚未得到解决.

原始问题: 有人想出办法管理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: 新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网格系统.我希望我很清楚,否则让我知道,我会详细说明.

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/

保持布局可能你可以改变你把类"行"放在哪里这样:

<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

我知道这是一个旧线程，但是我在使用内联表单时遇到了同样的问题，并且上述选项都没有解决该问题。所以我像这样修复了我的内联表单：-

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

如果在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;
}