html - 样式化具有两列的表单

Question

我正在尝试在下面重新创建此页面

我对 bootstrap 4 的网格系统非常熟悉，但我对表单非常吃力。表单在页面上的位置由一行和两个 col-6 组成。我正在处理第一列，但我似乎无法使用 flexbox 类将所有内容保持内联。有人可以告诉我如何获得这种类似的格式吗？

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  
  <div class="container">
    <div class="d-flex flex-row">
			<div class="col-6 d-flex"><!--left side -->
				<form class="form-inline">
					<div class="form-group">
						<label for="fname">First Name:</label>
						<input type="text" id="fname" class="form-control ml-5">
					</div>
					<div class="form-group">
						<label for="lname">Last Name:</label>
						<input type="text" id="lname" class="form-control ml-5">
					</div>
					<div class="form-inline">
						<label for="month/year">Date of Birth:</label>
						<select name="Month" class="custom-select" class="month/year">
  							<option value="january">January</option>
  							<option value="february">February</option>
  							<option value="march">March</option>
  							<option value="april">April</option>
  							<option value="may">May</option>
  							<option value="june">June</option>
  							<option value="july">July</option>
  							<option value="august">August</option>
  							<option value="september">September</option>
  							<option value="october">October</option>
  							<option value="november">November</option>
  							<option value="december">December</option>
						</select>
						<!--dates in this select below -->
						<select name="Year" class="custom-select" class="month/year">
							<option value="2018">2018</option>
							<option value="2017">2017</option> 
						</select>
					</div>
					<div class="form-group mt-3">
						<label>Gender:</label>
						<div>
							<label class="radio-button-container ml-2">Male
								<input type="radio" name="radio">
								<span class="black-dot"></span>
							</label>
						</div>
						<div>
							<label class="radio-button-container ml-2">Female
								<input type="radio" name="radio">
								<span class="black-dot"></span>
							</label>
						</div>
					</div>
					<div class="form-group">
							<label for="month/year">Field of Study:</label>
							<select name="Month" class="custom-select" class="month/year">
	  							<option value=""></option>	
	  						</select>
					</div>
				</form>	
			</div>
			<div class="col-6"></div><!--right side -->
		</div><!-- form for teacher/student-->
   </div>

代码段将是第一列中“名字”开始的左侧。如果我能理解如何获得这种类型的对齐，那么我就能弄清楚另一列。这可以使用 Bootstrap 类来完成吗？

Answer 1

实际上这不是 inline form , 所以你不应该使用 .form-inline在 <form> 上课.此结构称为水平形式，在 Horizontal form 下进行了描述。 Bootstrap 文档中的部分。基本上，您必须使用标准网格类来根据需要布置标签和输入字段。
此外，让您的 <form>标签同时包裹左右两列，只创建一种形式。否则无法一次性提交。

下面的示例提供了一个示例实现，其中 .col-sm-6类用于标签和输入。

<div class="container">
    <form>
        <div class="row">
            <div class="col-6"><!--left side -->
                <div class="form-group row">
                    <label for="fname" class="col-sm-6 col-form-label">First Name:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="fname">
                    </div>
                </div>

                <div class="form-group row">
                    <label for="lname" class="col-sm-6 col-form-label">Last Name:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="lname">
                    </div>
                </div>

                <div class="form-group row">
                    <label for="lname" class="col-sm-6 col-form-label">Date of Birth:</label>
                    <div class="col-sm-6">
                        <div class="row">
                            <div class="col-sm-6">
                                <select name="Month" class="custom-select" class="month/year">
                                    <option value="january">January</option>
                                    <option value="february">February</option>
                                    <option value="march">March</option>
                                    <option value="april">April</option>
                                    <option value="may">May</option>
                                    <option value="june">June</option>
                                    <option value="july">July</option>
                                    <option value="august">August</option>
                                    <option value="september">September</option>
                                    <option value="october">October</option>
                                    <option value="november">November</option>
                                    <option value="december">December</option>
                                </select>
                            </div>

                            <div class="col-sm-6">
                                <select name="Year" class="custom-select" class="month/year">
                                    <option value="2018">2018</option>
                                    <option value="2017">2017</option> 
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="lname" class="col-sm-6 col-form-label">Gender:</label>
                    <div class="col-sm-6">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="gender" id="gridRadios1" value="male" checked>
                                    <label class="form-check-label" for="gridRadios1">
                                        Male
                                    </label>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="gender" id="gridRadios2" value="female">
                                    <label class="form-check-label" for="gridRadios2">
                                        Female
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="lname" class="col-sm-6 col-form-label">Field of Study:</label>
                    <div class="col-sm-6">
                        <select name="Month" class="custom-select" class="month/year">
                            <option value=""></option>  
                        </select>
                    </div>
                </div>
            </div>

            <div class="col-6">
                <div class="form-group row">
                    <label for="email" class="col-sm-6 col-form-label">Email Address</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="email" value="email@example.com">
                    </div>
                </div>

                <div class="form-group row">
                    <label for="password" class="col-sm-6 col-form-label">Password</label>
                    <div class="col-sm-6">
                        <input type="password" class="form-control" id="password" value="">
                    </div>
                </div>

                <div class="form-group row">
                    <label for="password2" class="col-sm-6 col-form-label">Password</label>
                    <div class="col-sm-6">
                        <input type="password" class="form-control" id="password2" value="">
                    </div>
                </div>

            </div><!--right side -->
        </div><!-- form for teacher/student-->
    </form> 
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>