使用引导程序具有对齐项的字段集未正确对齐

Question

我正在处理线框，并尝试基于该线框创建HTML。这是我需要构建的结构：

这是我到目前为止所做的，但是未正确显示对齐方式。我使用了两列网格方法，然后使用了表单内联类，但是标签和文本框并没有在一行中对齐。

  
        <style>
            .body {
                padding: 1px 1px 1px 1px;
            }
    
            .column {
                float: left;
                width: 50%;
            }
    
            .customLegend {
                border: 1px solid #000;
                padding: 2em 0 1em;
                margin-top: 2em;
                position: relative;
            }
            
            .customLegend legend {
                    border: 0;
                    background: #fff;
                    width: auto;
                    transform: translateY(-50%);
                    position: absolute;
                    top: 0;
                    left: 1em;
                    padding: 0 .5em;
                }
        </style>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
        <div class="container body">
            <fieldset class="customLegend">
                <legend>Sources</legend>
    
                <div class="row">
                    <!-- Left Section -->
                    <div class="column">
                        <div class="form-inline">
                            <div class="form-inline">
                                <label>Initial Reporter </label>
                                <input type="text" class="form-control" />
                            </div>
    
                            <div class="form-inline">
                                <label class="lbl">First Name </label>
                                <input type="text" class="form-control" />
                            </div>
    
                            <div class="form-inline">
                                <label class="lbl">Phone Number </label>
                                <input type="text" class="form-control" />
                            </div>
    
                            <div class="form-inline">
                                <label class="lbl">Title </label>
                                <input type="text" class="form-control" />
                            </div>
    
                            <div class="form-inline">
                                <label class="lbl">Address </label>
                                <textarea class="form-control"> </textarea>
                            </div>
    
                            <div class="form-group">
                                <label class="lbl">Qualification </label>
                                <select class="form-control">
                                    <option value="0"> </option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                </select>
                            </div>
    
                            <div class="form-group">
                                <label class="lbl">Primary Source </label>
                                <input type="checkbox" class="form-control" />
                            </div>
    
                            <div class="form-group">
                                <label class="lbl">P I Usage </label>
                                <select class="form-control">
                                    <option value="0"> </option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                </select>
                            </div>
                        </div>
                    </div>
    
                    <!-- Right Section -->
                    <div class="column">
                        <div class="form-inline">
                            <div class="form-group">
                                <label class="lbl">Ok to Contact? </label>
                                <select class="form-control">
                                    <option value="0"> </option>
                                    <option value="1">Yes</option>
                                    <option value="2">No</option>
                                </select>
                            </div>
    
                            <div class="form-group">
                                <span class="form-inline">
                                    <label>Last Name </label>
                                    <input type="text" class="form-control" />
                                </span>
                            </div>
    
                            <div class="form-group">
                                <span class="form-inline">
                                    <label>Email </label>
                                    <input type="text" class="form-control" />
                                </span>
                            </div>
    
                            <div class="form-group">
                                <span class="form-inline">
                                    <label>Company </label>
                                    <input type="text" class="form-control" />
                                </span>
                            </div>
    
                            <div class="form-group">
                                <span class="form-inline">
                                    <label>Country </label>
                                    <input type="text" class="form-control" />
                                </span>
                            </div>
    
                            <div class="form-group">
                                <span class="form-inline">
                                    <label>Zip/Postal </label>
                                    <input type="text" class="form-control" />
                                </span>
                            </div>
    
                            <div class="form-group">
                                <span class="form-inline">
                                    <label>City </label>
                                    <input type="text" class="form-control" />
                                </span>
                            </div>
    
                            <div class="form-group">
                                <span class="form-inline">
                                    <label>State/Region </label>
                                    <input type="text" class="form-control" />
                                </span>
                            </div>
    
                            <div class="form-group">
                                <span class="form-inline">
                                    <label>Phone Number 2 </label>
                                    <input type="text" class="form-control" />
                                </span>
                            </div>
    
                            <div class="form-group">
                                <span class="form-inline">
                                    <label>FAX </label>
                                    <input type="text" class="form-control" />
                                </span>
                            </div>
    
                        </div>
                    </div>
                </div>
            </fieldset>
    
            <button class="btn btn-primary">Create New Source</button>
        </div>
    <script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    
 

Answer 1

在此处检查Jsfiddle

您需要将该列替换为col-6，并且引导div的层次结构应更改为以下

<div class="container">
                <div class="row">
                    <!-- Left Section -->
                    <div class="col-6">
                    </div>
                    <div class="col-6">
                    </div>
                </div>
</div>