显示验证消息时，输入控件变得分散

Question

我正在创建一个包含文本框，下拉列表等的mvc视图页面， 对于Ex，我在第1行有两个文本框并排，在第2行有另外两个文本框。当我单击不填充数据的保存时，所有文本框都会显示验证消息，而当我尝试从第1行填充文本框时，验证消息消失，第2行中的文本框转到第3行。

尝试使用一些CSS技巧，例如显示内联，但没有运气。

---

                    <div class="form-group col-md-6">
                        @Html.LabelFor(m => m.Name, new { @class = "text-req" })
                        @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
                        @Html.ValidationMessageFor(m => m.Name, "",
                   new { @class = "text-danger" })
                    </div>
                    <div class="form-group col-md-6">
                        @Html.LabelFor(m => m.Email, new { @class = "text-req" })
                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
                        @Html.ValidationMessageFor(m => m.Email, "",
                   new { @class = "text-danger" })
                    </div>
                    <div class="form-group col-md-6">
                        @Html.LabelFor(m => m.Mobile, new { @class = "text-req" })
                        @Html.TextBoxFor(m => m.Mobile, new { @class = "form-control" })
                        @Html.ValidationMessageFor(m => m.Mobile, "",
                   new { @class = "text-danger" })
                    </div>
                    <div class="form-group col-md-6">
                        @Html.LabelFor(m => m.DateofBirth, new { @class = "text-req" })
                        @Html.TextBoxFor(m => m.DateofBirth, new { @class = "form-control", @id = "datetimepicker2" })
                        @Html.ValidationMessageFor(m => m.DateofBirth, "",
                   new { @class = "text-danger" })