Отзывчивый столбец для входа

Question

Я пытаюсь создать форму входа, которая будет отзывчивой.Я хочу формы слева и логотип справа, используя столбцы начальной загрузки, но это, похоже, не работает.Вот исходный код.

<div class="row">
<div class="column">
    <form action="" method="post">
        <fieldset>
            <legend>Login</legend>
            <br />

            <input type="text" name="usern" placeholder="Username" />
            <br /><br />
            <input type="password" name="pass" placeholder="Password" />
            <br /><br />
            <input type="submit" name="login" value="Login" />
        </fieldset>
    </form>
</div>

<div class="column">
    <img src="../Content/edman_logo.png">
</div> 
</div>

Я что-то не так делаю?

Answer 1

<div class="container">   
  <div class="row">
    <div class="col">
      <form action="" method="post">
        <fieldset>
          <legend>Login</legend>
          <br />

          <input type="text" name="usern" placeholder="Username" />
          <br /><br />
          <input type="password" name="pass" placeholder="Password" />
          <br /><br />
          <input type="submit" name="login" value="Login" />
        </fieldset>
      </form>
    </div>

    <div class="logo">
      <img src="../Content/edman_logo.png">
    </div>   
  </div> 
</div>

CSS-классы

.logo{
  float: right;
}
.col{
  float: left;
}

Вот jsfiddle - https://jsfiddle.net/o4b0pgvq/

Answer 2

Я не уверен, используется ли column для Bootstrap 4.2.1.Поскольку вы предоставили неполный фрагмент, вы можете попробовать добавить container и переключить column на col, который находится в Bootstrap 4 Documentation .

Кроме того, код, который вы используетепохоже, это было скопировано и вставлено из другой формы.Я включил стили и метки, необходимые для его соответствия стилю Bootstrap «из коробки».Проверьте кодовое поле ниже, чтобы увидеть пример Bootstrap с использованием предоставленного вами кода.

Попробуйте это:

<div class="container">
  <div class="row">
    <div class="col">
      <h1>Login</h1>
      <hr>
      <form action="" method="post">
        <div class="form-group">
          <label for="usern">Username</label>
          <input type="text" class="form-control" aria-describedby="Username" name="usern" id="usern" placeholder="Username" />
        </div>
        <div class="form-group">
          <label for="pass">Password</label>
          <input type="password" class="form-control" name="pass" id="pass" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-primary" name="login" value="Login">Submit</button>
      </form>
    </div>

    <div class="col">
      <img src="../Content/edman_logo.png">
    </div>
  </div>
</div>

Пример Codepen: https://codepen.io/brooksrelyt/pen/gqxyQy