尝试根据所附模型开发有角度的前端屏幕

Question

我正在尝试根据提供的模型屏幕开发有角度的前端应用程序。但是，我不确定文本字段的对齐方式。请查看并提供帮助

我已经为字段编写了逻辑，但需要帮助根据模型正确对齐它们。

Answer 1

您可以使用引导网格系统根据模型正确对齐元素。 示例：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <label for="field1">Field 1</label>
      <input type="text" class="form-control" id="field1">
    </div>
    <div class="col-md-6">
      <label for="field2">Field 2</label>
      <input type="text" class="form-control" id="field2">
    </div>
  </div>

  <div class="row mt-3">
    <div class="col-md-6">
      <label for="field3">Field 3</label>
      <input type="text" class="form-control" id="field3">
    </div>
    <div class="col-md-6">
      <label for="field4">Field 4</label>
      <input type="text" class="form-control" id="field4">
    </div>
  </div>
</div>

您可以在这里阅读有关引导网格系统的更多信息：https://getbootstrap.com/docs/4.1/layout/grid/