我正在使用 bootstrap 3 网格系统，我想知道如何让“联系方式”选项卡显示在“出生日期”选项卡下，而没有任何大的空白区域？
我附上了页面上使用的一些代码，您可以在屏幕截图中看到这些代码被复制了。您将从代码中看到“联系方式”位于页面下方。我能够计算出偏移量，但无法计算出代码的位置。
<form method="post" role="form">
<div class="row setup-content" id="step-1">
<h3>
Partner Details <small>* marks a required field</small>
</h3>
<br>
<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Name and address
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="title">
Title
</label>
<select id="inputtitle" name="title" class="form-control" onchange="updateReview('title');" tabindex=1 />
<option value="" class="disabled" {if isset($val_title)}selected{/if}>Please select</option>
<option value="Master" {if $val_title eq "Master"} selected{/if}>Master</option>
<option value="Mr" {if $val_title eq "Mr"} selected{/if}>Mr</option>
<option value="Mrs" {if $val_title eq "Mrs"} selected{/if}>Mrs</option>
<option value="Miss" {if $val_title eq "Miss"} selected{/if}>Miss</option>
<option value="Ms" {if $val_title eq "Ms"} selected{/if}>Ms</option>
<option value="Rev." {if $val_title eq "Rev."} selected{/if}>Rev.</option>
</select>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="firstname">
First Name
<span class="asteriskField">
*
</span>
</label>
<input value="{$val_firstname}" type="text" onchange="updateReview('firstname');" class="form-control inputfirstname" id="firstname" name="firstname" placeholder="First Name" tabindex=2 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="surname">
Surname
<span class="asteriskField">
*
</span>
</label>
<input value="{$val_surname}" type="text" onchange="updateReview('surname');" class="form-control inputsurname" id="surname" name="surname" placeholder="Surname" tabindex=3 />
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="address1">
Address Line 1
</label>
<input value="{$val_address1}" type="text" onchange="updateReview('address1');" class="form-control inputaddress1" id="address1" name="address1" placeholder="Address Line 1" tabindex=4 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="address2">
Address Line 2 <small>(optional)</small>
</label>
<input value="{$val_address2}" type="text" onchange="updateReview('address2');" class="form-control inputaddress2" id="address2" name="address2" placeholder="Address Line 2" tabindex=5 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="citytown">
City/Town
</label>
<input value="{$val_citytown}" type="text" onchange="updateReview('citytown');" class="form-control inputcitytown" id="citytown" name="citytown" placeholder="City/Town" tabindex=6 />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="county">
County
</label>
<input value="{$val_county}" type="text" onchange="updateReview('county');" class="form-control inputcounty" id="county" name="county" placeholder="County" tabindex=7 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="country">
Country
</label>
<select id="inputcountry" name="country" class="form-control" name="country" onchange="updateReview('country');" tabindex=8 />
<option>Please select</option>
<option>Scotland</option>
<option>England</option>
<option>Wales</option>
<option>Northern Ireland</option>
<option>Other</option>
</select>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="postalcode">
Postal Code
</label>
<input value="{$val_postalcode}" type="text" onchange="updateReview('postalcode');" class="form-control inputpostalcode" id="postalcode" name="postalcode" placeholder="Postal Code" tabindex=9 />
</div>
</div>
</div>
</div>
<!-- END COL-MD-8 -->
</div>
<!-- END ROW -->
</div>
<!-- END STEP 1 -->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Date of Birth
</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
<div class="col-md-4 col-md-offset-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Contact Details
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="form-group">
<label for="home">
Home Telephone Number
</label>
<input value="{$val_hometel}" type="tel" onchange="updateReview('home');" class="form-control inputhome" id="home" name="hometel" placeholder="Home Telephone Number" tabindex=11 />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="form-group">
<label for="mobile">
Mobile Telephone Number
</label>
<input value="{$val_mobtel}" type="tel" onchange="updateReview('mobile');" class="form-control inputmobile" id="mobile" name="mobtel" placeholder="Mobile Telephone Number" tabindex=12 />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="form-group">
<label for="email">
Email Address
</label>
<input value="{$val_email}" type="text" onchange="updateReview('email');" class="form-control inputemail" id="email" name="email" placeholder="Email Address" tabindex=13 />
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" tabindex=10 /> Next
</button>
</div>
</div>
最佳答案
如果将“联系方式”部分放在同一个 div 元素中，则可以在“出生日期”部分下方看到“联系方式”部分。试试这个代码。
<form method="post" role="form">
<div class="row setup-content" id="step-1">
<h3>
Partner Details <small>* marks a required field</small>
</h3>
<br>
<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Name and address
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="title">
Title
</label>
<select id="inputtitle" name="title" class="form-control" onchange="updateReview('title');" tabindex=1 />
<option value="" class="disabled" {if isset($val_title)}selected{/if}>Please select</option>
<option value="Master" {if $val_title eq "Master"} selected{/if}>Master</option>
<option value="Mr" {if $val_title eq "Mr"} selected{/if}>Mr</option>
<option value="Mrs" {if $val_title eq "Mrs"} selected{/if}>Mrs</option>
<option value="Miss" {if $val_title eq "Miss"} selected{/if}>Miss</option>
<option value="Ms" {if $val_title eq "Ms"} selected{/if}>Ms</option>
<option value="Rev." {if $val_title eq "Rev."} selected{/if}>Rev.</option>
</select>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="firstname">
First Name
<span class="asteriskField">
*
</span>
</label>
<input value="{$val_firstname}" type="text" onchange="updateReview('firstname');" class="form-control inputfirstname" id="firstname" name="firstname" placeholder="First Name" tabindex=2 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="surname">
Surname
<span class="asteriskField">
*
</span>
</label>
<input value="{$val_surname}" type="text" onchange="updateReview('surname');" class="form-control inputsurname" id="surname" name="surname" placeholder="Surname" tabindex=3 />
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="address1">
Address Line 1
</label>
<input value="{$val_address1}" type="text" onchange="updateReview('address1');" class="form-control inputaddress1" id="address1" name="address1" placeholder="Address Line 1" tabindex=4 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="address2">
Address Line 2 <small>(optional)</small>
</label>
<input value="{$val_address2}" type="text" onchange="updateReview('address2');" class="form-control inputaddress2" id="address2" name="address2" placeholder="Address Line 2" tabindex=5 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="citytown">
City/Town
</label>
<input value="{$val_citytown}" type="text" onchange="updateReview('citytown');" class="form-control inputcitytown" id="citytown" name="citytown" placeholder="City/Town" tabindex=6 />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="county">
County
</label>
<input value="{$val_county}" type="text" onchange="updateReview('county');" class="form-control inputcounty" id="county" name="county" placeholder="County" tabindex=7 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="country">
Country
</label>
<select id="inputcountry" name="country" class="form-control" name="country" onchange="updateReview('country');" tabindex=8 />
<option>Please select</option>
<option>Scotland</option>
<option>England</option>
<option>Wales</option>
<option>Northern Ireland</option>
<option>Other</option>
</select>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="postalcode">
Postal Code
</label>
<input value="{$val_postalcode}" type="text" onchange="updateReview('postalcode');" class="form-control inputpostalcode" id="postalcode" name="postalcode" placeholder="Postal Code" tabindex=9 />
</div>
</div>
</div>
</div>
<!-- END COL-MD-8 -->
</div>
<!-- END ROW -->
</div>
<!-- END STEP 1 -->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Date of Birth
</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Contact Details
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="form-group">
<label for="home">
Home Telephone Number
</label>
<input value="{$val_hometel}" type="tel" onchange="updateReview('home');" class="form-control inputhome" id="home" name="hometel" placeholder="Home Telephone Number" tabindex=11 />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="form-group">
<label for="mobile">
Mobile Telephone Number
</label>
<input value="{$val_mobtel}" type="tel" onchange="updateReview('mobile');" class="form-control inputmobile" id="mobile" name="mobtel" placeholder="Mobile Telephone Number" tabindex=12 />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="form-group">
<label for="email">
Email Address
</label>
<input value="{$val_email}" type="text" onchange="updateReview('email');" class="form-control inputemail" id="email" name="email" placeholder="Email Address" tabindex=13 />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" tabindex=10 /> Next
</button>
</div>
</div>
关于html - Bootstrap 3 网格系统偏移，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49844029/