html - 如何对齐输入框

Question

我有文本和输入框，我想对齐文本和输入框，但没有幸运。这样做的想法是什么？您用来解决此类问题的过程/步骤(或您如何看待这个问题)是什么？

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4">
            <div>
                @Html.LabelFor(model => model.Name)
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
            <div>
                @Html.LabelFor(model => model.ComputerID)
                @Html.EditorFor(model => model.ComputerID)
                @Html.ValidationMessageFor(model => model.ComputerID)
            </div>
        </div>
        <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
        <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    </div>
</div>

screenshot of UI

Answer 1

试试这个:

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>