Bootstrapのカラムについて

Question

フォームのボタンにつけてあるoffsetが効きません。どなたか対処法を教えてください。

<section class="contact">
            <form class="form-horizontal" netlify>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Name</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="(例) 山田　太郎">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Company Name</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="(例) サンプル株式会社">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">E-mail</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="(例) [e-mail]">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Message</label>
                    <div class="col-sm-10">                            
                        <input type="text" class="form-control" placeholder="(例) 具体的にお書きください">
                    </div>
                </div>
                <div class="form-group col-sm-10 col-sm-offset-2">
                    <button type="button" class="btn btn-success btn-block">送信</button>
                </div>
            </form>
        </section>

.contact-container{
    background-color: #fff;
    grid-row: container;
    
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    grid-template-rows:
                [sec-t] 200px
                [body] auto;
}
.contact-text{
    grid-row: sec-t;
}
.contact{
    grid-row: body;
}

.form-group{
    margin-bottom: 50px;
}

Comments

[ryuii]

bootstrapのバージョンは4を使用していますでしょうか。フォームボタンをどういう配置にしようとされているのでしょうか？

[zynu]

間違ってBootstrapのバージョン３を読み込んでいたみたいです。
フォームボタンはフォームのinputと幅・位置を揃えたいと思っています。

[ryuii]

先にベストアンサーがついたので、そちらを参考にするとよいと思います。

[zynu]

はい、解決しました！
ありがとうございました。

Answer 1

Bootstrap 3か4かに返答がないですが、新規に作る場合は4にしない理由が(私には思い当たら)無いですし、**Bootstrap 4だと推定して回答します。**3の書き方が見られますが、Bootstrap 4を使いながらも3にしか対応していない古いサイトを参考して書く人が非常に多いので、その類だろうと推測しています。もし、Bootstrap 3を使用している場合は、この回答は無視してください。

<section class="contact">
  <form netlify>
    <div class="form-group row">
      <label class="col-sm-2 control-label">Name</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" placeholder="(例) 山田　太郎">
      </div>
    </div>
    <div class="form-group row">
      <label class="col-sm-2 control-label">Company Name</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" placeholder="(例) サンプル株式会社">
      </div>
    </div>
    <div class="form-group row">
      <label class="col-sm-2 control-label">E-mail</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" placeholder="(例) [e-mail]">
      </div>
    </div>
    <div class="form-group row">
      <label class="col-sm-2 control-label">Message</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" placeholder="(例) 具体的にお書きください">
      </div>
    </div>
    <div class="form-group row">
      <div class="col-sm-10 offset-sm-2">
        <button type="button" class="btn btn-success btn-block">送信</button>
      </div>
    </div>
  </form>
</section>

【解説】

Bootstrap 4でフォームの各要素を水平に並べる場合はrowまたはform-rowを使用します。Bootstrap 3のform-horizontalは使用できません。

Horizontal form - Forms · Bootstrap

使い方は通常のグリッドシステムと同じです。col-で幅指定し、offset-等でオフセットを指定します。

Grid system · Bootstrap

基本の12分割はBootstrap 3の時から変わりませんが、画面サイズのオプションや並べ方等は変更があります。

---

Bootstrapの書き方について調べるときは3か4かを注意深く確認してください。3と4では互換性が無い部分が数多く存在し、バージョンが異なるとうまくいかに場合がほとんどです。基本はBootstrap公式ドキュメントを参考にすることをお勧めします。

Comments

[zynu]

誤ってバージョン３を読み込んでしまっていました。
以後気をつけたいと思います。丁寧なご回答ありがとうございます。