Bootstrap v2.3.2电子商务结账页面中的奇怪对齐

时间：2013-11-22 15:48:48

标签： javascript jquery html css twitter-bootstrap

我的电子商务结帐页面上有一个“结算明细”部分，这真的给了我一些麻烦。不确定它是什么。使用Bootstrap v2.3.2

确实有很多因素。看起来奇怪的是：http://i.imgur.com/BpJaZar.png

这个奇怪的白色空间在左边。我确实有Billing高于运费的详细信息，但大多数网站似乎做运输然后结算。所以，我打翻了他们。但是，就是这个问题开始的时候。

我的送货/结算明细区域的代码是：

<div class="checkoutstep" style="display: block;">
<div class="row">
<fieldset>
<div class="span4">
<div class="control-group">
<label class="control-label">Same as Billing Address</label>
<div class="controls">
<input name="ShippingAsBilling" id="ShippingAsBilling" value="yes" type="checkbox">
<script type="text/javascript">
$(document).ready(function(){ 
$('#ShippingAsBilling').click(function(){
if($('#ShippingAsBilling').is(':checked')){
$('#FName_Ship').val($('#FirstName').val());
$('#LName_Ship').val($('#LastName').val());
$('#Phone_Ship').val($('#Phone').val());
var state = $('#State option:selected').val();
$('#State_Ship option[value=' + state + ']').attr('selected','selected');
$('#Company_Ship').val($('#Company').val());
$('#Address1_Ship').val($('#Address1').val());
$('#Address2_Ship').val($('#Address2').val());
$('#City_Ship').val($('#City').val());
$('#PostalCode_Ship').val($('#PostalCode').val());
var country = $('#Country option:selected').val();
$('#Country_Ship option[value=' + country + ']').attr('selected','selected');
populateShippingMethods('Default');
} else { 
//Clear on uncheck
$('#FName_Ship').val("");
$('#LName_Ship').val("");
$('#Phone_Ship').val("");
$('#State_Ship option[value=Nothing]').attr('selected','selected');
$('#Company_Ship').val("");
$('#Address1_Ship').val("");
$('#Address2_Ship').val("");
$('#City_Ship').val("");
$('#PostalCode_Ship').val("");
$('#Country_Ship').val("");
populateShippingMethods('Default');
};
});
});
</script>
</div>
</div>
<div class="control-group">
<label class="control-label">First Name<span class="red">*</span></label>
<div class="controls">
<input type="text" id="FName_Ship" name="FName_Ship" value="James" onchange="$.ajax( { type: 'GET', dataType: 'json', url: 'dmiajaxsecure.aspx?request=updatedata&fieldname=shipfname&fieldvalue=' + this.value + '&extra=' + rnd() } );">
</div>
</div>
<div class="control-group">
<label class="control-label">Last Name<span class="red">*</span></label>
<div class="controls">
<input type="text" id="LName_Ship" name="LName_Ship" value="Anderson" onchange="$.ajax( { type: 'GET', dataType: 'json', url: 'dmiajaxsecure.aspx?request=updatedata&fieldname=shiplname&fieldvalue=' + this.value + '&extra=' + rnd() } );">
</div>
</div>
<div class="control-group">
<label class="control-label">Telephone<span class="red">*</span></label>
<div class="controls">
<input type="text" id="Phone_Ship" name="Phone_Ship" value="" onchange="$.ajax( { type: 'GET', dataType: 'json', url: 'dmiajaxsecure.aspx?request=updatedata&fieldname=shipphone&fieldvalue=' + this.value + '&extra=' + rnd() } );" placeholder="8005438955">
</div>
</div>
<div class="control-group">
<label class="control-label">Company</label>
<div class="controls">
<input type="text" id="Company_Ship" name="Company_Ship" value="" onchange="$.ajax( { type: 'GET', dataType: 'json', url: 'dmiajaxsecure.aspx?request=updatedata&fieldname=shipCompany&fieldvalue=' + this.value + '&extra=' + rnd() } );">
</div>
</div>
<div class="control-group">
<label class="control-label">Address 1<span class="red">*</span></label>
<div class="controls">
<input type="text" id="Address1_Ship" name="Address1_Ship" maxlength="100" value="241 fox drive" onchange="$.ajax( { type: 'GET', dataType: 'json', url: 'dmiajaxsecure.aspx?request=updatedata&fieldname=shipAddress1&fieldvalue=' + this.value + '&extra=' + rnd() } );">
</div>
</div>
</div>
<div class="span4">
<div class="control-group">
<label class="control-label">Address 2</label>
<div class="controls">
<input type="text" id="Address2_Ship" name="Address2_Ship" maxlength="100" value="" onblur="$.ajax( { type: 'GET', dataType: 'json', url: 'dmiajaxsecure.aspx?request=updatedata&fieldname=shipAddress2&fieldvalue=' + this.value + '&extra=' + rnd() } );">
</div>
</div>
<div class="control-group">
<label class="control-label">City<span class="red">*</span></label>
<div class="controls">
<input type="text" id="City_Ship" name="City_Ship" value="piqua" onchange="$.ajax( { type: 'GET', dataType: 'json', url: 'dmiajaxsecure.aspx?request=updatedata&fieldname=shipCity&fieldvalue=' + this.value + '&extra=' + rnd() } );">
</div>
</div>
<div class="control-group">
<label class="control-label">Post Code<span class="red">*</span></label>
<div class="controls">
<input type="text" id="PostalCode_Ship" name="PostalCode_Ship" value="90210" onblur="populateShippingMethods('Default');" placeholder="45356">
</div>
</div>
<div class="control-group">
<label class="control-label">Country<span class="red">*</span></label>
<div class="controls">
<select name="Country_Ship" id="Country_Ship" class="required" onchange="populateShippingMethods('Default');">
        <option value="US">United States</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">State<span class="red">*</span></label>
<div class="controls">
<select name="State_Ship" id="State_Ship" class="required" onchange="populateShippingMethods('Default');">

        <option value=""> - Select - </option>
        <option value="AK">Alaska</option>
</select>
</div>
</div>
</div>
</fieldset>
<div class="checkoutsteptitle down" id="Step3">Step 3: Billing Details
</div>
<div class="checkoutstep" style="display: block;">
<div class="row">
<fieldset>
<div class="span4">
<div class="control-group">
<label class="control-label">First Name<span class="red">*</span></label>
<div class="controls">
<input type="text" id="FirstName" name="FirstName" value="James">
</div>
</div>
<div class="control-group">
<label class="control-label">Last Name<span class="red">*</span></label>
<div class="controls">
<input type="text" id="LastName" name="LastName" value="Anderson">
</div>
</div>
<div class="control-group">
<label class="control-label">E-Mail<span class="red">*</span></label>
<div class="controls">
<input type="text" id="E-Mail" name="Email" value="Ananans@amleo.com" placeholder="example@amleo.com"> 
</div>
</div>
<div class="control-group">
<label class="control-label">Telephone<span class="red">*</span></label>
<div class="controls">
<input type="text" id="Phone" name="Phone" value="" placeholder="8005438955">
</div>
</div>
<div class="control-group">
<label class="control-label">Company</label>
<div class="controls">
<input type="text" id="Company" name="Company" value="">
</div>
</div>
</div>
<div class="span4">
<div class="control-group">
<label class="control-label">Address 1<span class="red">*</span></label>
<div class="controls">
<input type="text" id="Address1" name="Address1" value="241 fox drive" maxlength="100">
</div>
</div>
<div class="control-group">
<label class="control-label">Address 2</label>
<div class="controls">
<input type="text" id="Address2" name="Address2" maxlength="100" value="">
</div>
</div>
<div class="control-group">
<label class="control-label">City<span class="red">*</span></label>
<div class="controls">
<input type="text" id="City" name="City" value="piqua">
</div>
</div>
<div class="control-group">
<label class="control-label">Post Code<span class="red">*</span></label>
<div class="controls">
<input type="text" id="PostalCode" name="PostalCode" value="90210" onblur="updateBillingInfo();" placeholder="45356">
</div>
</div>
<div class="control-group">
<label class="control-label">Country<span class="red">*</span></label>
<div class="controls">
<select name="COUNTRY" id="Country" onchange="updateBillingInfo();">
        <option value="US">United States</option> 
</select>   
</div>
</div>
<div class="control-group">
<label class="control-label">State<span class="red">*</span></label>
<div class="controls">
<select name="State" id="State" onchange="updateBillingInfo();">
        <option value=""> - Select - </option>
        <option value="AK">Alaska</option>
</select>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>

1 个答案:

答案 0 :(得分：1)

您应该遵循bootstrap 2.x版本的行结构。 row div应该如下所示。你做了嵌套的行元素，这在bootstrap 2.x版本中是不可能的。

<div class="row">
  <div class="span4">
     Your elements
  </div>
  <div class="span4">
     Your elements
  </div>
</div>

以下是您的解决方案：http://jsbin.com/EWaKaZo/2

相关问题
最新问题