ホームページ  >  記事  >  ウェブフロントエンド  >  ブートストラップでフォームの幅と高さを設定する方法

ブートストラップでフォームの幅と高さを設定する方法

尚
オリジナル
2019-07-27 15:41:584252ブラウズ

ブートストラップでフォームの幅と高さを設定する方法

クラス .input-lg と .col-lg-* を使用して、フォームの高さと幅をそれぞれ設定できます。

次の例はこれを示しています:

<form role="form">
  <div class="form-group">
    <input class="form-control input-lg" type="text" placeholder=".input-lg">
  </div>
  <div class="form-group">
    <input class="form-control" type="text" placeholder="默认输入">
  </div>
  <div class="form-group">
    <input class="form-control input-sm" type="text" placeholder=".input-sm">
  </div>
  <div class="form-group"></div>
  <div class="form-group">
    <select class="form-control input-lg">
      <option value="">.input-lg</option>
    </select>
  </div>
  <div class="form-group">
    <select class="form-control">
      <option value="">默认选择</option>
    </select>
  </div>
  <div class="form-group">
    <select class="form-control input-sm">
      <option value="">.input-sm</option>
    </select>
  </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></form>

実行結果は次のとおりです:

ブートストラップでフォームの幅と高さを設定する方法

推奨: bootstrap 入門チュートリアル

以上がブートストラップでフォームの幅と高さを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。