Asp.net mvc 大窗体的布局控件，按每行大小分别居中

我有一个表单，其中包含用户必须填写的大量字段

我想把他们排成2-4组。每个控件可能有不同的大小，标签应显示在控件的左侧。
控件应水平居中，并且不应占用未占用的空间，只占用所需的空间

下面是我需要的一个例子：

名字：▓▓▓▓▓▓▓▓ 姓氏：▓▓▓▓▓▓▓▓性别：▓▓▓▓▓

电话：▓▓▓▓▓▓▓▓ 单元格：▓▓▓▓▓▓▓▓电邮：▓▓▓▓▓▓▓▓

地址:▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓

我试着使用

表单内联

和

容器的组合，但我无法让它工作

这里是我表单上的一个小片段，不幸的是它是razor，我无法在JSFIDLE上测试它，但这是一个示例输出

<div class="container center-block">
  <h4>Patient</h4>
  <hr />
  @Html.ValidationSummary(true, "", new { @class = "text-danger" })
  @Html.HiddenFor(model => model.Id)

  <div class="row">

    <div class="form-group">
      @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-3" })
      <div class="col-md-3">
        @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
      </div>
    </div>

    <div class="form-group">
      @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-3" })
      <div class="col-md-3">
        @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
      </div>
    </div>

    <div class="form-group">
      @Html.LabelFor(model => model.Gender, htmlAttributes: new { @class = "control-label col-md-3" })
      <div class="col-md-3">
        @Html.EnumDropDownListFor(model => model.Gender, htmlAttributes: new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Gender, "", new { @class = "text-danger" })
      </div>
    </div>
  </div>

  <div class="row">
    <div class="form-group">
      @Html.LabelFor(model => model.Passport, htmlAttributes: new { @class = "control-label col-md-3" })
      <div class="col-md-3">
        @Html.EditorFor(model => model.Passport, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.Passport, "", new { @class = "text-danger" })
      </div>
    </div>

    <div class="form-group">
      @Html.LabelFor(model => model.BirthDate, htmlAttributes: new { @class = "control-label col-md-3" })
      <div class="col-md-3">
        @Html.EditorFor(model => model.BirthDate, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.BirthDate, "", new { @class = "text-danger" })
      </div>
    </div>
  </div>
</div>


病人

@Html.ValidationSummary（true，“，new{@class=“text danger”}）
@Html.HiddenFor（model=>model.Id）
@LabelFor（model=>model.FirstName，htmlAttributes:new{@class=“controllabel col-md-3”}）
@EditorFor（model=>model.FirstName，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.FirstName，“，new{@class=“text danger”}）
@LabelFor（model=>model.LastName，htmlAttributes:new{@class=“controllabel col-md-3”}）
@EditorFor（model=>model.LastName，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.LastName，“，new{@class=“text danger”}）
@LabelFor（model=>model.Gender，htmlAttributes:new{@class=“controllabel col-md-3”}）
@EnumDropDownListFor（model=>model.Gender，htmlAttributes:new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.Gender，“，new{@class=“text danger”}）
@LabelFor（model=>model.Passport，htmlAttributes:new{@class=“controllabel col-md-3”}）
@EditorFor（model=>model.Passport，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.Passport，“，new{@class=“text danger”}）
@LabelFor（model=>model.BirthDate，htmlAttributes:new{@class=“controllabel col-md-3”}）
@EditorFor（model=>model.BirthDate，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.BirthDate，“，new{@class=“text danger”}）

下面是它的渲染方式：

我尝试了更多的方法，但我不知道是什么使一个单独的行在其他行中独立，并将以下规则应用于其控件，而不考虑表单设置：



使每个控件的标签位于其右侧的水平形式
每行多个
表单组
s
将控件堆栈水平居中，而不是将其加宽以占用所有可用空间
根据最宽的行调整外部宽度，然后将窗体向左对齐
使行内的列与其他行完全独立

任何对深入教程的参考都将不胜感激
 您可以在下面的页面中查看一些不错的设计和示例：






希望这有帮助……
我唯一没有完全完成的部分是将表单向左对齐。我想我已经得到了你要求的一切。将为您理解居中列提供基础。祝你好运

将此文件复制到新文件中的style.css

.row-centered {
    text-align:center;
}
.control-label{padding: 20px;}
form  { display: table;
}
h1 {
    margin:40px 40px 20px 40px;
      color:#95c500;
    font-size:28px;
    line-height:34px;
    text-align:left;
}

然后将其复制到Index.html：

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
  <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

  <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="ExampleController">
  <h1>Patient</h1>
  <div class="container" align="left">
    <form class="form-inline row-centered">

      <input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Id" name="Id" type="hidden" value="" />

      <div class="row">
        <div class="form-group">
          <label class="control-label " for="  FirstName">FirstName</label>
          <input class=" form-control text-box single-line" data-val="true" data-val-length="The field FirstName must be a string with a minimum length of 2 and a maximum length of 32." data-val-length-max="32" data-val-length-min="2" data-val-required="The FirstName field is required."
          id="FirstName" name="FirstName" type="text" value="" /> <span class="field-validation-valid text-danger" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
        </div>

        <div class="form-group">
          <label class="control-label" for="  LastName">LastName</label>
          <input class="form-control text-box single-line" data-val="true" data-val-length="The field LastName must be a string with a minimum length of 2 and a maximum length of 32." data-val-length-max="32" data-val-length-min="2" data-val-required="The LastName field is required."
          id="LastName" name="LastName" type="text" value="" /> <span class="field-validation-valid text-danger" data-valmsg-for="LastName" data-valmsg-replace="true"></span>
        </div>
        <div class="form-group">
          <label class="control-label" for="  Gender">Gender</label>
          <select class="form-control" data-val="true" data-val-required="The Gender field is required." id="Gender" name="Gender">
            <option selected="selected" value="0">Male</option>
            <option value="1">Female</option>
          </select> <span class="field-validation-valid text-danger" data-valmsg-for="Gender" data-valmsg-replace="true"></span>
        </div>

        <div class="form-group">
          <label class="control-label" for="  Passport">Passport</label>
          <input class="form-control text-box single-line" data-val="true" data-val-length="The field Passport must be a string with a minimum length of 5 and a maximum length of 12." data-val-length-max="12" data-val-length-min="5" id="Passport" name="Passport"
          type="text" value="" /> <span class="field-validation-valid text-danger" data-valmsg-for="Passport" data-valmsg-replace="true"></span>
        </div>

        <div class="form-group">
          <label class="control-label" for="  BirthDate">BirthDate</label>
          <input class="form-control text-box single-line" data-val="true" data-val-date="The field BirthDate must be a date." data-val-range="The field BirthDate must be between 01/01/1915 12:00:00 AM and 01/01/2035 12:00:00 AM." data-val-range-max="01/01/2035 00:00:00"
          data-val-range-min="01/01/1915 00:00:00" data-val-required="The BirthDate field is required." id="BirthDate" name="BirthDate" type="date" value="" /> <span class="field-validation-valid text-danger" data-valmsg-for="BirthDate" data-valmsg-replace="true"></span>
        </div>
      </div>

    </form>
  </div>


</body>

</html>


病人
名字
姓氏
性别
男性
女性
护照
生日



使每个控件的标签位于其左侧的水平形式：（您在一个位置说左，在另一个位置说右）。这很容易改变
每行多个表单组：将整个表单放在一个“行”类中，让页面宽度相应地确定适合的表单组数量
将控件堆栈水平居中，而不是将其加宽以占用所有可用空间：查看上面的输出，或者将我的代码复制到plunk并在那里查看输出
使行内的列与其他行完全独立
任何对深入教程的参考都将不胜感激！请查看以下内容：
您是否尝试过以下方法？如果它解决了问题，你能把它标记为答案吗？提前谢谢…嗨，我出去了，对不起。我已经更新了我的问题。有人否决了我，可能是因为他知道他无论如何都不会得到我决定奖励的那50个，因为我知道这个问题确实需要一些努力，谢谢。没关系，我否决了这个问题：）请看更新的代码和我在答案下面的评论。关于你的上述问题，我强烈推荐我在我的答案上发布的网页。因为有比你需要的多得多的东西，你将至少使用其中的一个。尽管如此，如果你还有关于这个问题的问题，请告诉我。尽管如此，这些列的宽度都是相同的。如何使每行的列宽度独立？请参阅我问题中所需的示例。我更新了代码。它应该是工作的，但让我在测试后通知它。虽然可以使用不同的