我无法缩小引导程序中表元素之间的距离。这给了我一个似乎无法解决的奇怪的60%差距。我认为这与我要实现的网格系统有关。我尝试过内联样式,但似乎无法使其缩小。谁能建议快速解决方案?
欢呼
<div class="container">
<table class="table table-striped">
<tbody>
<tr>
<td colspan="1" >
<form class="well form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label" style="width: 100%;">Which ArtSound Partner are you?</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select class="selectpicker form-control">
<option>ANU School of Music</option>
<option>Arts Society of Canberra</option>
<option>Australian Festival of Chamber Music</option>
<option>ANU School of Music</option>
<option>ANU School of Music</option>
<option>ANU School of Music</option>
<option>ANU School of Music</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Not an ArtSound partner?</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="eventname" name="eventname" placeholder="Event name
" class="form-control" required="true" value="" type="text">
</div>
<input type="checkbox" name="check" checked> <span class="label-text">Optional: Please send me information about becoming an arts partner</span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Name of your event</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="eventname1" name="eventname1" placeholder="Address Line 2" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Please describe your event</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><textarea id="city" name="city" placeholder="Please describe your event" class="form-control" required="true" value="" type="text" rows="5" onkeyup="countChar(this)"></textarea></div>
<span style="font-size: 12px;">Characters left: <span id="charNum">250</span></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Pick a date or type one in</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input id="postcode" name="daterange" placeholder="Pick a date" class="form-control" required="true" value="" type="text">
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'left'
}, function(start, end, label) {
-console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
</script>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Pick a time</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="postcode" name="postcode" placeholder="00:00" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
</fieldset>
</form>
</td>
<td colspan="1">
<form class="well form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-12 control-label">Please enter your event's address</label>
<div class="col-md-12 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><textarea id="city" name="city" placeholder="Please describe your event" class="form-control" required="true" value="" type="text" rows="5" onkeyup="countChar(this)"></textarea></div>
<span style="font-size: 12px;">Characters left: <span id="charNum">250</span></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Web address</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input id="fullName" name="fullName" placeholder="http://" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Email</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group"><span class="input-group-addon" style="max-width: 100%;"><i class="glyphicon glyphicon-home"></i></span><input id="addressLine1" name="addressLine1" placeholder="johnsmith@gmail.com" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
</div>
</fieldset>
</form>
</td>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分:2)
我不确定您的问题,但是看到您的代码后,您可以尝试以下任一方法:
row
类作为每个col-*-*
类的父元素,例如form-group
类。no-gutters
添加到row
类中,以删除每个col-*-*
类的填充table-sm
,以最小化表中行的填充。