使用引導程序具有對齊項的字段集未正確對齊

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