form-inline bootstrap 3中的输入宽度答案

【问题标题】：input width in form-inline bootstrap 3form-inline bootstrap 3中的输入宽度
【发布时间】：2014-07-21 20:06:09
【问题描述】：

我不明白，如何在 Bootstrap 3 中自定义输入（表单控件）宽度？

<header>
    <div class="container">
        <div class="row">
            <form role="form" class="form-inline">
                  <div class="form-group">
                      <input type="text" class="form-control" placeholder="Почтовый идентификатор" id="search"> 
                  </div>
                    <input type="button" class="btn  btn-success" value="Найти" onclick="window.location.href = '/result/'+document.getElementById('search').value">
            </form>
        </div>
    </div>
</header>

我可以在没有一些样式的情况下做到这一点（例如宽度，以像素为单位）吗？

【问题讨论】：

标签： jquery html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以通过将.form-group-* 添加到元素来快速调整水平表单中的标签和表单控件的大小

您还可以使用 .input-group-sm 或 .input-group-lg 类快速调整 .input-group 中的所有输入和其他元素的大小

【讨论】：

我需要移动响应，而不是像素中的硬尺寸
@КонстантинРусанов：引导程序提供的输入类没有响应。您需要像这样将它们包装在 div 中 stackoverflow.com/a/21036484/1719752
@Milind Anantwar，我认为在 Bootstrap v.3.1.1（bootstrap.css 文件）中只有 input-lg 和 input-sm 可用。所以我猜你可能指的是旧版本的 Bootstrap（？）。我对 Bootstrap 很陌生，目前正在学习如何使用 v.3.1.1 :-)
在 Bootstrap v3 中，input-lg 和 input-sm 影响高度，不影响宽度。
@jyrkim: 如果你熟悉的话，可以更新新的语法就好了:)

【解决方案2】：

更新（添加了 W3Schools 链接）：我刚刚发现在这个问题上有一个很好的答案：w3schools.com/bootstrap/bootstrap_forms_sizing.asp。关于如何将.input-lg 和.input-sm 应用于输入高度或.col-lg-* 和.col-sm- 应用于输入宽度，有很好的示例。

原答案：您是否尝试过将 Bootstrap Grids 与您的 Form 和 col-xs-.. 类一起用于需要堆叠在移动设备上的每个输入字段。类似于下面的代码（从 Bootstrap 复制粘贴）：

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

我将这些 col-xs-.. 类应用到您的表单上，并将您的列堆叠在移动设备上（好吧，我只是将浏览器窗口变小并且它工作）。

<div class="container">
        <div class="row">
            <form role="form" class="form-inline">
                <div class="col-xs-12 col-md-2"> 
                    <div class="form-group">  
                        <input type="text" class="form-control" placeholder="Почтовый идентификатор" id="search">  
                    </div>
                </div>
                    <div class="col-xs-6 col-md-1">
                        <input type="button" class="btn  btn-success" value="Найти" onclick="window.location.href = '/result/' + document.getElementById('search').value"/>
                </div>
            </form>
        </div>
    </div>

在桌面设备上，我为这些字段设置了较小的值：col-md-2 和 col-md-1，但您可能希望按照自己喜欢的方式微调这些值。

更新： 您是否考虑过为您的输入元素使用 LESS 变量来自定义颜色和大小，Bootstrap 允许您这样做：“自定义 Less 变量以在您的自定义 CSS 样式表中定义颜色、大小等。”

如果您查看 Bootstrap 站点的 Customize 部分。它允许您自定义表单中的输入元素。 LESS 变量，例如：@input-bg、@input-color、@input-height-base、@input-border 和其他变量可能对您的情况有用。例如 @input-height-base 默认是 .form-control 高度。

【讨论】：

@КонстантинРусанов 我今天意识到我昨天没有回答你的问题；相反，我为您提供了一些设置，帮助您在不同设备中查看页面时进行布局，这些设置也会影响字段的大小。今天，我意识到您可能想要自定义设置

【解决方案3】：

试试

.form-inline .form-group input {
    width:140px;
}

供css操作

【讨论】：