Bootstrap 3 上的输入宽度

Posted

技术标签:

【中文标题】Bootstrap 3 上的输入宽度【英文标题】:Input widths on Bootstrap 3 【发布时间】:2013-09-03 14:02:14 【问题描述】:

再次更新:我将通过选择最佳答案来结束此问题,以防止人们在没有真正理解问题的情况下添加答案。实际上,如果不使用网格或添加额外的 css,就无法使用内置功能来做到这一点。例如,如果您正在处理需要超出简短输入但它们是“内置”的help-block 元素,则网格无法正常工作。如果这是一个问题,我建议使用额外的 css 类,您可以在 BS3 讨论 here 中找到这些类。现在 BS4 已经发布,可以使用包含的 sizing 样式来管理它,因此这将不再适用。感谢大家对这个受欢迎的 SO 问题的积极投入。

更新:这个问题仍然悬而未决,因为它是关于 BS 中的 内置 功能来管理输入宽度而不求助于网格(有时它们必须独立管理) .我已经使用自定义类来管理它,所以这不是基本 css 的操作方法。该任务在 BSfeature 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>

【问题讨论】:

为什么要使用 bootstrap 来管理这些宽度?它似乎不是特别擅长,而且它引入了复杂性。 为什么要为此使用引导程序,@Eamon?响应式设计和与引导程序处理的其他元素的对齐会浮现在脑海中。无论如何,问题的重点是如何在不引入复杂性的情况下做到这一点。 @ctb:普通 CSS 可以很好地处理这类问题;不需要额外的复杂性引导。 等一下,这个问题得到回答了吗? 38 次赞成是很多。 @rook - 答案是不,虽然它在他们的讨论列表中,但没有内置功能。然而,作为替代品,这里提供了一些,直到/如果 BS 实际添加了它。 【参考方案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 了解更多信息。我希望我很清楚,否则请告诉我,我会详细说明。

【讨论】:

是的,这就是我在对@Skelly 的评论中所发表的内容——这方面存在一个未解决的问题,一旦事情稳定下来,他们就会解决这个问题。添加行我们不是我想要的,因为如果他们制作了正确的类,额外的标记是完全不必要的——这就是我所做的。我创建了具有百分比宽度的 .input1-12 并将其应用于输入 - 效果很好 我没有阅读太多关于这篇文章的文章,但是......“使用 Bootstrap 的预定义网格类通过向表单添加 .form-horizo​​ntal 来在水平布局中对齐标签和表单控件组。做所以将 .form-groups 更改为网格行,因此不需要 .row。" @dtc 这对输入宽度没有多大帮助? @shadowf 如果我想让输入比它的标签短怎么办?我是否必须在 另一个 对 div 中输入输入? 感谢这对我有用。顺便说一句,我在周日晚上 10 点 :-) 因为我在地球的另一端。【参考方案2】:

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

【讨论】:

到目前为止,这在答案上获胜。它干净,可重复使用,并且可以正常工作。事实上,它应该默认放在引导程序中,因为这是一个非常常见的烦恼。您很少需要纯块形式。 我尝试了这个解决方案,但它对我不起作用。我想限制我的字段的宽度,所以我在自定义样式中使用了“width:200px”,但这并没有改变宽度。只有当我设置 'max-width:200px' 时,我才得到正确的结果。 当我使用它时,宽度不会覆盖表单控件类的自动宽度。 在这里同意 cmets - 我实际上在看这里之前尝试过这个,它似乎并没有覆盖默认值......不确定为什么有些自定义样式可以,有些不可以。 这是一个演示这是什么样子的小提琴:jsfiddle.net/yd1ukk10【参考方案3】:

ASP.net MVC 转到 Content-Site.css 并删除或注释此行:

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

【讨论】:

如果你看一下小提琴,你会发现 OP 想要使字段更小,而不是更大。这里更大的问题是他的网站根本没有引用 site.css。 我不知道有 css 规则,我指定的宽度似乎被忽略了,这让我发疯。谢谢。【参考方案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 中,输入、选择和文本区域默认为 100% 宽。要使用内联表单,您必须在其中使用的表单控件上设置宽度。

所以另一种选择是使用 CSS 设置特定宽度:

.form-control 
    width:100px;

或者,将col-sm-* 应用于“表单组”。

【讨论】:

您必须将行类添加到表单组 - 我与 Bootstrap 团队进行了讨论,他们已经在他们的计划列表中添加了输入特定宽度控制的可能性。与此同时,我们必须使用完整的网格。如果您继续向表单组类添加行并删除水平类,我将标记此答案。这是工作小提琴jsfiddle.net/tdUtX/2 和计划github.com/twbs/bootstrap/issues/9397 +@Yashua - +1 很好的例子。这也适用于 input-group 类,这给我带来了麻烦。【参考方案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/

【讨论】:

不适用于小型设备,因为输入字段太小了【参考方案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 以约束输入

【讨论】:

那行不通。它会导致每个后续元素浮动在这个元素旁边。您必须在每个表单组上添加一个带有类行的 div,这很荒谬。【参考方案7】:

如果您在 Visual Studio 15 中使用 Master.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;

【讨论】:

【参考方案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,但是为​​内联表单做了这项工作。

【讨论】:

【参考方案9】:

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

选项1:添加样式属性

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

选项 2:在 css 中定义

input
  width: 100px

您可以在自动中更改 100px

希望能帮到你。

【讨论】:

【参考方案10】:

在引导程序 3 中

所有带有.form-control的文本

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

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

无论如何,您的示例有效。只需在大屏幕上查看,您就可以看到姓名和电子邮件字段是 with 的 2/12(col-lg-1 + col-lg-1,您有 12 列)。但是,如果您的屏幕较小(只需调整浏览器的大小),输入将扩展至行尾。

【讨论】:

【参考方案11】:

你不必放弃简单的 css :)

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

【讨论】:

【参考方案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>

我已将整个表单的最大宽度设置为 500 像素。这样你就不需要使用任何 Bootstrap 的网格系统,它也会保持表单响应。

【讨论】:

【参考方案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%,因此宽度遵循覆盖的宽度。

这不是最好的方法,而是我解决问题的最简单和唯一的解决方案。

希望这会有所帮助。

【讨论】:

【参考方案14】:

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

我添加了这个:

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

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

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

Here is the fiddle with it working

【讨论】:

【参考方案15】:

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>

【讨论】:

【参考方案16】:

Bootstrap 使用“表单输入”类来控制“输入字段”的属性。简单地说,在您的 css 文件或 head 部分中添加您自己的具有所需宽度、边框、文本大小等的“表单输入”类。

(或者,直接在body部分的输入属性中添加size='5'内联代码。)

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

【讨论】:

【参考方案17】:

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>

【讨论】:

以上是关于Bootstrap 3 上的输入宽度的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap 3 - 如何最大化导航栏中的输入宽度

Bootstrap 3:使用 input-group/input-group-addon 和水平标签设置自定义宽度

Bootstrap 3:中心块不适用于最大宽度[重复]

Bootstrap:在一行上创建 3 个输入表单字段并均匀分布,占据页面宽度的一半?

Bootstrap 3选择选项切断

Bootstrap - 输入组插件标签宽度对齐