Help us understand the problem. What is going on with this article?

.form内の一部inputだけinlineで表示する

More than 5 years have passed since last update.

Bootstrapだと .form-inline 以外の .form-input がブロック要素になってしまう。
従って、 .form-horizontal 内の一部 input だけinlineにしたい場合、少し工夫が必要になる。

必要になるシーン

生年月日や姓名で別のフォームに入力させるときなど。

実装

解決方法として、 .form-group 内でインラインフォームをまとめる要素に .form-inline を指定する。

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-3 control-label">ラベル</label>
    <div class="col-sm-9 form-inline">
      <label></label><input type="text" class="form-control" />&nbsp;
      <label></label><input type="text" class="form-control" />
    </div>
  </div>
</form>

これでいけるはずです。

nantekkotai
意識の低いフロントエンドエンジニア。主にJSを嗜みます。
http://nantekkotai.hatenablog.com/
diggle
予実管理のためのB2B SaaSを提供しています。
https://diggle.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away