无法在角度网页中对齐组件

Question

我有一个有多个组件的角形页面。简单来说，这是一个登录表单。参考下图

当您在图像中时，我需要将用户图像和密码文本对齐到每个文本字段的左侧。

以下是代码

<div>
  <img src="src\assets\images\shutterstock_505757569.jpg" style="width: 100%; height: 600px;" alt="" />

</div>
 <div class="transbox">
   <form style="padding-left: 20%; padding-right: 20%">
      <h1 style="font-size:50px">Welcome to Medica</h1>
    <div class="form-field">
       <span class="glyphicon glyphicon-user" style="float: left;"> </span>
       <input type="text" style="float: left;"  class="form-control" id="username">
      
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="button" class="btn btn-danger" style="font-weight: bolder; ">Login</button>
   </form>
  </div>

Answer 1

从here将引导程序导入到您的项目中，并使用预定义的引导程序类来提供帮助。更新代码应类似于

    <div class="form-field col-sm-12">
       <span class="glyphicon glyphicon-user col-sm-4" style="float: left;"> </span>
       <input type="text" style="float: left;"  class="form-control col-sm-8" id="username">

    </div>
    <div class="form-group col-sm-12">
      <label class="col-sm-4" for="pwd">Password:</label>
      <input type="password" class="form-control col-sm-8" id="pwd">
    </div>