ホームページ制作・大阪インフォメーションメディアデザイン

06-6809-5021

Staff Blog
スタッフブログ

  • Twitterでシェア
  • このエントリーをはてなブックマークに追加
  • Google+でシェア
  • follow us in feedly

Bootstrapでチェックボックスを横並びにして最後にテキストボックスをつける

top

Bootstrapは便利ですね。
僕のようなデザインができない人でもHTMLをコピペするだけでいい感じになるので重宝してます。
でもちょっと変わったことをしようとするとやり方が分からなくて困ります。
今回は先日ハマった、横並びチェックボックスの最後にテキストボックスをつける方法をご紹介します。

form

上の画像の”Color”の項目です。
フォーム全体を横並びにするのはform要素のクラスにform-inlineを指定すればできるのですが、他の項目は通常の表示にしたいというケースで使えると思います。

ソースコードはこちら。(formの中だけ抜粋)

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Text 1</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Text 2</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group">
    <p class="control-label"><b>Color</b></p>
    <div class="form-inline">
      <label class="checkbox-inline"><input type="checkbox"> Red</label>
      <label class="checkbox-inline"><input type="checkbox"> Blue</label>
      <label class="checkbox-inline"><input type="checkbox"> Yellow</label>
      <label class="checkbox-inline"><input type="checkbox"> Other</label>
      <input type="text" class="form-control">
    </div>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>


チェックボックスの部分を”form-inline”で囲ってやればいいんですね。
こういう情報は公式ページには載ってないので調べるのに苦労します(^o^;)
本日は以上です。お疲れ様でしたm(_ _)m

参考URL

bootstrap3で横並びのボックスを実現する方法
Bootstrap3でform-horizontalの中でテキストフォームを横に並べる

この記事を共有する

投稿者:i.M.D. Staff
    2015年07月07日火曜日 | 21:03
    2週連続でブログ当番はキツイ(;´∀`)

    この人が書いたその他のブログ記事

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    • I.M.Dコーポレートサイト
    お問い合わせ