Как перемещать элементы в форме входа Bulma? - PullRequest
Новая
       32

Как перемещать элементы в форме входа Bulma?

0 голосов
/ 02 августа 2020

Я создал базовую c форму входа с Bulma https://prnt.sc/tspbg6

  1. ***** во вводе пароля не центрирован по вертикали, я бы хотел чтобы знать, что мне вводить в классе тегов пароля.
  2. Флажок «Запомнить меня» и кнопка «Войти» расположены по центру по горизонтали, и я хочу, чтобы они были слева, как тексты электронной почты и пароля. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello Bulma!</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <section class="hero is-primary is-fullheight">
      <div class="hero-body">
        <div class="container">
          <div class="columns is-centered">
            <div class="column is-5-tablet is-4-desktop is-3-widescreen">
              <form class="box">
                <div class="field has-text-centered">
                  <img src="/images/Copia de ISOTIPO.png" width="150" />
                  <div class="field">
                    <label class="label has-text-left">Email</label>
                    <div class="control has-icons-left">
                      <input
                        class="input"
                        type="email"
                        placeholder="e.g. sisco@gmail.com"
                        required
                      />
                      <span class="icon is-small is-left">
                        <i class="fa fa-envelope"></i>
                      </span>
                    </div>
                  </div>
                  <div class="field">
                    <label class="label has-text-left">Password</label>
                    <div class="control has-icons-left">
                      <input
                        class="input"
                        type="password"
                        placeholder="********"
                        required
                      />
                      <span class="icon is-small is-left">
                        <i class="fa fa-lock"></i>
                      </span>
                    </div>
                  </div>
                  <div class="field">
                    <label class="checkbox">
                      <input type="checkbox" />
                      Remember me
                    </label>
                  </div>
                  <div class="field">
                    <button class="button is-success">
                      Login
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>
...