bugfix> html > 投稿

単純なフォームの中央にチェックボックスと送信ボタンを配置しようとしています 「mx-auto」クラスを使って同じことをやってみました。

しかし、それは機能していません

送信ボタンのチェックボックスを中央または右側に配置するにはどうすればよいですか?


<div class="container">
    <h3>Please Login</h3>
    <form #userForm="ngForm">
        <div class="form-group">
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="email" placeholder="name@example.com">
                <label for="email">Email address</label>
            </div>
        </div>
        <div class="mx-auto">
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="remember-me" checked>
                    <label class="form-check-label" for="remember-me">
                        Remember Me
                    </label>
                </div>
            </div>
        </div>
        <div id="submit" class="mx-auto">
            <button type="button" type="submit" class="btn btn-primary">LOGIN</button>
        </div>
    </form>
</div>

出力は次のとおりです。

回答 2 件
  • これを使用して、個別に処理できます

    <div class="container">
            <h3>Please Login</h3>
            <form #userForm="ngForm">
            <div class="form-group">
                <div class="form-floating mb-3">
                    <input type="email" class="form-control" id="email" placeholder="name@example.com">
                    <label for="email">Email address</label>
                </div>
            </div>
            <div class="row">
            <div class="mx-auto">
              <div class="form-group">
                  <div class="form-check">
                      <input class="form-check-input" type="checkbox" value="" id="remember-me" checked>
                      <label class="form-check-label" for="remember-me">
                          Remember Me
                      </label>
                  </div>
              </div>
              
              <div class="form-group">
                  <button type="button" type="submit" class="btn btn-primary">LOGIN</button>
              </div>
            </div>
            </div>
        </form>
        </div>
    
    

  • text-centerクラスをコンテナに追加すると、内部のすべてが中央に配置されます。 以下のデモを参照してください。

    <!-- CSS -->
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
          crossorigin="anonymous"
        />
    <div class="container text-center">   <!-- text-center here -->
          <h3>Please Login</h3>
          <form #userForm="ngForm">
            <div class="form-group">
              <div class="form-floating mb-3">
                <input
                  type="email"
                  class="form-control"
                  id="email"
                  placeholder="name@example.com"
                />
                <label for="email">Email address</label>
              </div>
            </div>
            <div class="mx-auto">
              <div class="form-group">
                <div class="form-check">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    value=""
                    id="remember-me"
                    checked
                  />
                  <label class="form-check-label" for="remember-me">
                    Remember Me
                  </label>
                </div>
              </div>
            </div>
            <div id="submit" class="mx-auto">
              <button type="button" type="submit" class="btn btn-primary">
                LOGIN
              </button>
            </div>
          </form>
        </div>
    
    

あなたの答え