web-dev-qa-db-ja.com

bootstrap 3の入力フィールド幅をカスタマイズする方法

input-xlargeやinput-largeなどの重要な機能を削除した後、bootstrap 3での置換は何ですか？

もちろんcol-lg-12などを使用することもできますが、タブペインでエラーが発生します。

style = "width:30px; "も使用できますが、input-xlargeとは異なり、応答性が失われます。

textinputtwitter-bootstrap-3
47
user2754528

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とは少し異なりますが、すぐに慣れます。

65
Alexander Rechsteiner

これらのクラスを使用できます

input-lg

入力

そして

入力SM

入力フィールドの場合は、inputをbtnに置き換えます。

このドキュメントを確認してください http://getbootstrap.com/getting-started/#migration

これにより、要素の高さのみが変更され、col-xs-* col-md-* col-lg-*などのグリッドシステムクラスを使用する必要がある幅を減らすことができます。

例col-md-3。こちらのドキュメントを参照してください http://getbootstrap.com/css/#grid

6
devo
  <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>
2
Andrew Koper

メインのcssファイルでmax-widthで解決しました。

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

これは、「コード」がほとんどないシンプルなソリューションです

1
Edi G.
<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>
0
naveesh