49

在删除了诸如input-xlargeand之类的关键特性之后input-large，在 bootstrap 3 中它的替代品是什么？

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

我也可以使用style = "width:30px;“但它会失去它的响应能力，不像input-xlarge。任何建议等？

4

5 回答 5

67

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

请参阅列大小。

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

于 2013-09-19T17:16:00.923 回答
6

您可以使用这些类

输入-lg

输入

和

输入-sm

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

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

这只会改变元素的高度，以减少您必须使用网格系统类的宽度，例如col-xs-* col-md-* col-lg-*.

例子col-md-3。请参阅此处的文档http://getbootstrap.com/css/#grid

于 2013-09-19T16:15:52.990 回答
2 
  <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>
于 2016-01-25T22:30:08.767 回答
0 
<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>
于 2017-05-18T13:04:06.140 回答
0

max-width我在我的主css文件中解决了一个问题。

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

这是一个简单的解决方案，几乎没有“代码”

于 2016-01-08T14:10:33.857 回答