如何在引导程序 3 中自定义输入字段宽度答案

【问题标题】：how to customise input field width in bootstrap 3如何在引导程序 3 中自定义输入字段宽度
【发布时间】：2013-09-24 05:16:47
【问题描述】：

在删除了 input-xlarge 和 input-large 等关键功能后，在 bootstrap 3 中的替代品是什么？

当然我可以使用col-lg-12 等，但这会在选项卡窗格中出现错误。

我也可以使用style = "width:30px;"，但它会像input-xlarge那样失去响应能力。有什么建议吗？

【问题讨论】：

你可以使用他的类 input-sm 来解决它
正确的方法确实是使用 col-md-X （见下面我的回答）。请澄清您的“标签窗格”的问题（我不知道您的意思）。

标签： text input twitter-bootstrap-3

【解决方案1】：

在 Bootstrap 3 中，.form-control（您提供输入的类）的宽度为 100%，这允许您将它们包装到 col-lg-X div 中进行排列。文档中的示例：

<div class="row">
  <div class="col-lg-2">
    <input type="text" class="form-control" placeholder=".col-lg-2">
  </div>
  <div class="col-lg-3">
    <input type="text" class="form-control" placeholder=".col-lg-3">
  </div>
  <div class="col-lg-4">
    <input type="text" class="form-control" placeholder=".col-lg-4">
  </div>
</div>

参见Column sizing。

这与 Bootstrap 2.3.2 中的有点不同，但你很快就会习惯。

【讨论】：

请注意，您可以使用 Bootstrap 的预定义网格类通过在表单中添加 .form-horizontal 来在水平布局中对齐标签和表单控件组。这样做会将.form-groups 更改为网格行，因此不需要.row - more information。

【解决方案2】：

你可以使用这些类

输入-lg

输入

和

输入-sm

用于输入字段并将 input 替换为 btn 用于按钮。

查看此文档http://getbootstrap.com/getting-started/#migration

这只会改变元素的高度，为了减小宽度，你必须使用像col-xs-* col-md-* col-lg-* 这样的网格系统类。

例如col-md-3。在此处查看文档http://getbootstrap.com/css/#grid

【讨论】：

这些类不会改变输入元素的宽度。
@eddiegroves 这只会改变元素的高度，为了减少你必须使用像.col-xs-* .col-md-* .col-lg-*这样的网格系统类的宽度。示例col-md-3。在此处查看文档getbootstrap.com/css/#grid

【解决方案3】：

  <form role="form">
    <div class="form-group">
      <div class="col-xs-2">
        <label for="ex1">col-xs-2</label>
        <input class="form-control" id="ex1" type="text">
      </div>
      <div class="col-xs-3">
        <label for="ex2">col-xs-3</label>
        <input class="form-control" id="ex2" type="text">
      </div>
      <div class="col-xs-4">
        <label for="ex3">col-xs-4</label>
        <input class="form-control" id="ex3" type="text">
      </div>
    </div>
  </form>

【讨论】：

【解决方案4】：

我在主 css 文件中使用 max-width 解决了问题。

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

这是一个“代码”很少的简单解决方案

【讨论】：

建议的样式混淆了分组输入。

【解决方案5】：

<div class="form-group">
                    <div class="input-group col-md-5">
                    <div class="input-group-addon">
                    <span class="glyphicon glyphicon-envelope"></span> 
            </div>
                        <input class="form-control" type="text" name="text" placeholder="Enter Your Email Id" width="50px">

                    </div>
                    <input type="button" name="SIGNUP" value="SIGNUP">
            </div>

【讨论】：