web-dev-qa-db-ja.com

Bootstrapを使用した複数行入力フォームフィールド

<form class="span6">
  <h2>Get In Touch</h2><br>
  <input class="span6" type="text" placeholder="Your first name" required>
  <input class="span6" type="text" placeholder="Your last name" required>
  <input class="span6" type="email" placeholder="Your email" required>
  <input class="span6" type="text" placeholder="Your phone number">
  <input class="span6" type="text" rows="3" placeholder="What's up?" required><br>
  <button type="submit" class="btn btn-primary">Submit</button>
  <button type="clear" class="btn">Clear</button>
</form><!--/.span6-->

Bootstrapで使用しているフォームは次のとおりです。私は最後の入力フィールドを横6列、縦3行にしようとしていますが、横6列、縦1行としか表示されません。入力ボックスを大きくする方法についてのアイデアはありますか？ありがとう。

htmlhtml5twitter-bootstrap
33
Brian

問題は、textareaではなくtype = "text"を使用していることだと思います。あなたが欲しいのは：

<textarea class="span6" rows="3" placeholder="What's up?" required></textarea>

明確にするために、type = "text"は常に1行になりますが、textareaは複数行にできます。

53
Nick Mitchinson

Nick Mitchinsonによる答えは、Bootstrapバージョン2。

Bootstrapバージョン3を使用している場合、フォームは少し変更されています。bootstrap 3の場合は、代わりに以下を使用します。

<div class="form-horizontal">
    <div class="form-group">
        <div class="col-md-6">
            <textarea class="form-control" rows="3" placeholder="What's up?" required></textarea>
        </div>
    </div>
</div>

ここで、col-md-6は中規模のデバイスを対象としています。 col-xs-6などを追加して、より小さなデバイスをターゲットにすることができます。

36
trees_are_great