読者です 読者をやめる 読者になる 読者になる

BootStrap3の横並びフォーム

BootStrap3のform-inlineではラベルがフォームの上に表示されない。
いや、出来るのかもしれないけど多分出来ないと思っている。

調べても出てこないし時間が無駄に消費されるだけで埒が明かない。
なのでCSSで何とかしてしまうことにした。

SCSS

/* display:table子要素の共通定義 */
@mixin table-child{
    display:table-cell;
}

.wide_form {
  display: table;
  table-layout: fixed;
  border-collapse:separate;
  border-spacing:10px 0;

  div{
    @include table-child;
  }

  .btn{
    margin-left:10px;
    position:relative;
    top:30px;
  }

}

HTML

<form class="wide_form" id="edit_skill_1" action="/skill_update" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="/ly8S/C+KRzvMRwhkSV6NZ4qqTKcRxDttb7Y58/QZuaG28gfgc1Itn/KX/tD4xw8xiqylqEB5Ynu9XfJ07Nsjw==" />
        <div class="form-group">
          <label for="skill_name">Name</label>
          <input class="form-control" placeholder="技術名" type="text" value="Java" name="skill[name]" id="skill_name" />
        </div>
        <div class="form-group">
          <label for="skill_learning">Learning</label>
          <input min="1" max="5" class="form-control" placeholder="理解度" type="number" value="3" name="skill[learning]" id="skill_learning" />
        </div>
        <div class="form-group">
          <label for="skill_preference">Preference</label>
          <input min="1" max="5" size="20" class="form-control" placeholder="好感度" type="number" value="2" name="skill[preference]" id="skill_preference" />
        </div>
          <input type="submit" name="commit" value="更新" class="btn btn-warning" />
          <input type="submit" name="commit" value="削除" class="btn btn-danger" />
</form>

ボタンの位置調整については微妙に問題が残ってる気が...
とりあえず、これでフォームの上にラベルは表示される様になる。