Question

我正在尝试创建一个响应式的登录表单。我想要左边的表格，右边是使用bootstrap列的徽标，但这似乎不起作用。这是源代码。

SELECT * FROM all_directories WHERE  directory_name = 'TEMPKBU'

OWNER   DIRECTORY_NAME  DIRECTORY_PATH                          ORIGIN_CON_ID
SYS     TEMPKBU         \\kcdkfile03\UserData\Bruger\KBU\temp   0

我做错什么了吗？

Answer 1

我不确定Bootstrap 4.2.1是否使用column。由于您提供的代码段不完整，您可以尝试添加container并将column切换到Bootstrap 4 Documentation中的col。

此外，您正在使用的代码看起来像是从另一种形式复制并粘贴的。我已经包括了必要的样式和标签，以使其与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>

示例代码笔：https://codepen.io/brooksrelyt/pen/gqxyQy

Answer 2

<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/

响应栏登录

2 个答案: