大型表单的布局控件按每行大小单独居中

Question

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

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

这是我需要的示例：

名字：↓↓↓↓↓↓↓↓ 姓氏：↓↓↓↓↓↓↓↓ 性别：↓↓↓↓↓

电话：↓↓↓↓↓↓↓↓ 手机：↓↓↓↓↓↓↓↓邮箱：↓↓↓↓↓↓↓↓

地址：↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓【=16=】

我尝试使用 form-inline 组合和不组合 container，但无法正常工作。

这是我的表单的一小段，不幸的是它是剃刀，我无法在 jsFiddle 上测试它，但 here 无论如何是一个示例输出。

<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>

这是它的呈现方式：

我已经尝试了更多的东西，但我不知道是什么解锁了使单个行独立于其他行并将以下规则应用于其控件的秘密，而忽略了表单设置：

水平形式，以便每个控件的标签都在其右侧
每行多个 form-groups
将控件堆栈水平居中，而不是将它们加宽以占据所有可用的 space
根据最宽的行调整外宽，然后左对齐表格
让行内的列完全独立于其他行

任何深入教程的参考都将不胜感激！

Answer 1

您可以查看下面这些页面以获取一些不错的设计和示例：

http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708

http://css.maxdesign.com.au/floatutorial/introduction.htm

http://tympanus.net/Development/TextInputEffects/index2.html

https://bootswatch.com/

http://getbootstrap.com/components/

希望这对您有所帮助...

Answer 2

我唯一没有完全完成的部分是将表单左对齐。我想我已经得到了你要求的一切。 http://www.minimit.com/demos/bootstrap-3-responsive-centered-columns 将为您提供理解居中列的基础。祝你好运！

将此复制到新 Plunk 中的 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>

水平形式，这样每个控件的标签都在它的左边：（你在一个地方说左边，在另一个地方说右边）。很容易改变。
每行多个表单组：将整个表单放入一个 "row" class 并让页面宽度相应地确定适合多少个表单组。
将控件堆栈水平居中，而不是扩大它们以占据所有可用的space：查看上面的输出，或者将我的代码复制到一个 plunk 并查看那里的输出。
行内的列完全独立于其他行
任何深入教程的参考都将不胜感激！查看以下内容：http://www.minimit.com/demos/bootstrap-3-responsive-centered-columns

大型表单的布局控件按每行大小单独居中

Layout controls of a large form centered individually per each row size

asp.net-mvc

grid

razor

twitter-bootstrap

twitter-bootstrap-3