我在表单上使用表单组时遇到了一个问题,尤其是在 sm View 中,我不喜欢表单组内输入字段之间的空格。
是否有一种简单的解决方案可以使表单组 div 中输入字段之间的间距与不同表单组之间的间距一样宽?检查下面的代码和 fiddle 。
欢迎任何有用的提示!提前致谢。
编辑: 我不是在寻找 CSS 解决方案,我可以自己做一个 - 我正在寻找一种合适的 Bootstrap 方式:)
screenshot with small description
http://jsfiddle.net/zb4dc/552/
<form id="test" class="form-horizontal" method="post">
<fieldset>
<div class="form-group">
<label class="col-md-2 control-label" for="input_name">Name</label>
<div class="col-md-4">
<input id="input_name" name="input_name" type="text" placeholder="IMG_0202" class="form-control input-md">
</div>
<label class="col-md-2 control-label" for="input_title">Title</label>
<div class="col-md-4">
<input id="input_title" name="input_title" type="text" placeholder="San Francisco..." class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="input_size">Size</label>
<div class="col-md-4">
<input id="input_size" name="input_size" type="text" placeholder="900x600" class="form-control input-md">
</div>
<label class="col-md-2 control-label" for="select_body">Camera Body</label>
<div class="col-md-4">
<select id="select_body" name="select_body" class="form-control">
<?php select code ?>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="input_iso">ISO</label>
<div class="col-md-4">
<input id="input_iso" name="input_iso" type="text" placeholder="100" class="form-control input-md">
</div>
<label class="col-md-2 control-label" for="select_lens">Camera Lens</label>
<div class="col-md-4">
<select id="select_lens" name="select_lens" class="form-control">
<?php select code ?>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="input_aperture">Aperture</label>
<div class="col-md-4">
<input id="input_aperture" name="input_aperture" type="text" placeholder="F/5.6" class="form-control input-md">
</div>
<label class="col-md-2 control-label" for="input_exposure">Exposure</label>
<div class="col-md-4">
<input id="input_exposure" name="input_exposure" type="text" placeholder="1/1000 sec" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="input_location">Location</label>
<div class="col-md-4">
<input id="input_location" name="input_location" type="text" placeholder="47.586319, 7.648753" class="form-control input-md">
</div>
<label class="col-md-2 control-label" for="input_createdate">Create date</label>
<div class="col-md-4">
<input id="input_createdate" name="input_createdate" type="text" placeholder="1986-04-23 13:37:00" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="submit"></label>
<div class="btn-group col-md-4 col-xs-12" role="group">
<button type="submit" id="submit" name="submit" class="btn btn-primary col-md-6 col-xs-6">Insert</button>
<button type="reset" id="reset" name="reset" class="btn btn-default col-md-6 col-xs-6">Reset</button>
</div>
</div>
</fieldset>
</form>
最佳答案
考虑一个表单组。我想你正在尝试这个
<div class="custom-margin">
<label class="col-md-2 control-label" for="input_name">Name</label>
<div class="col-md-4">
<input id="input_name" name="input_name" placeholder="IMG_0202" class="form-control input-md" type="text">
</div>
</div>
<div class="custom-margin">
<label class="col-md-2 control-label" for="input_title">Title</label>
<div class="col-md-4">
<input id="input_title" name="input_title" placeholder="San Francisco..." class="form-control input-md" type="text">
</div>
</div>
在你的 CSS 中
.custom-margin{
margin-bottom: 15px;
}
关于html - bootstrap form-group behavior 小型设备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37071487/