Bootstrap 3网格系统偏移
[英]Bootstrap 3 grid system offset
问题描述
I'm using the bootstrap 3 grid system and I'm wondering how I can get the 'Contact Details' tab to show under the 'Date of Birth' tab without any large white blank space? 
我正在使用bootstrap 3网格系统，并且想知道如何使“联系方式”标签显示在“出生日期”标签下而没有任何大的空白？
I've attached some of the code used on the page which you can see being replicated on the screenshot. 我已经附加了页面上使用的一些代码，您可以看到这些代码已在屏幕截图中复制。 You will see from the code that the 'Contact Details' are quite a bit down the page. 您会从代码中看到“联系详细信息”在页面的下方。 I am able to figure out the offset but just not the placement of the code. 我能够找出偏移量，但不能找出代码的位置。
<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>
1 个解决方案
解决方案1
0 2018-04-15 16:28:34
You can get the 'contact details' part just below 'date of birth' part if you put both of them inside same div element. 如果将它们都放在同一个div元素中，则可以在“出生日期”部分的下方获得“联系方式”部分。 Try this code. 试试这个代码。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
推/拉和偏移在 Bootstrap 网格系统中的作用 - Role of push/pull and offset in Bootstrap grid system
自举网格偏移量 - bootstrap grid offset gap
引导网格和列偏移 - Bootstrap Grid and column offset
引导网格偏移未居中 - Bootstrap grid offset not centering
Bootstrap网格偏移量报价 - Bootstrap Grid Offset Quetsion
Bootstrap网格样式忽略了偏移量 - Bootstrap grid style is ignoring offset
Bootstrap 3-网格系统和缩略图 - Bootstrap 3 - grid system and thumbnail
Bootstrap GRID系统可能吗？ - Bootstrap GRID System possible?
带表的自举网格系统 - Bootstrap grid system with table
引导网格系统 - Bootstrap Grid-System
相关标签