LoginSignup
40
37

More than 5 years have passed since last update.

Bootstrap3でform-horizontalの中でテキストフォームを横に並べる

Posted at

生年月日を入力させるフォームで年、月、日のテキストフォームを分けて横に並べました。
Bootstrap3だけでは記述しきれずに、下記のスタイルを追記しました。
style="width: 70px;display: inline-block;"
最終的にCSSは外部ファイル化します。

利用頻度が高そうなパターンですが、Bootstrap3だけで完結する方法は無いのかな?

<form action="" class="form-horizontal">
  <div class="form-group">
    <label for="name" class="control-label col-md-3">氏名</label>
    <div class="col-sm-8">
      <input type="text" placeholder="氏名" id="name" class="form-control">
    </div>
  </div>

  <div class="form-group">
    <label for="kana" class="control-label col-md-3">フリガナ</label>
    <div class="col-sm-8">
      <input type="text" placeholder="フリガナ" id="kana" class="form-control">
    </div>
  </div>

  <div class="form-group">
    <label for="birth" class="control-label col-md-3">生年月日</label>
    <div class="col-sm-8">
      <input type="text" class="form-control" placeholder="年" style="width: 70px;display: inline-block;"><span style="margin: 0 5px;"></span>
      <input type="text" class="form-control" placeholder="月" style="width: 50px;display: inline-block;"><span style="margin: 0 5px;"></span>
      <input type="text" class="form-control" placeholder="日" style="width: 50px;display: inline-block;"><span style="margin: 0 5px;"></span>
    </div>
  </div>

  <div class="form-group">
    <label for="adr" class="control-label col-md-3">住所</label>
    <div class="col-sm-8">
      <input type="text" placeholder="住所" id="adr" class="form-control">
    </div>
  </div>
</form>
40
37
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
40
37