我正在制作一个有很多表单的应用程序,一想到要为棘手的垂直对齐表单和水平对齐表单引用表单引用,我就感到疲倦。
当我想要垂直和水平形式时,我想要一个最终片段作为我的引用点。
对于垂直形式(垂直对齐的形式)我使用此代码
https://jsfiddle.net/bgebzwqd/11/
<form role="form">
<div class="form-group">
<label for="name">First name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group">
<label for="address">Second name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group col-md-4">
<button type="submit" class="btn btn-default">Register</button>
</div>
</form>
对于水平形式我有这个
https://jsfiddle.net/0jwzxoe2/20/
<form role="form">
<div class="form-group">
<div class="col-xs-3">
<label class="control-label">One</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<label class="control-label ">Two</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<label class="control-label ">Three</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<label class="control-label ">Four</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<label class="control-label ">Five</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<button type="submit" class="btn btn-default">Register</button>
</div>
</div>
</form>
在第一种形式(垂直形式)中,我如何控制形式 Bootstrap 方式的宽度(尝试并避免自定义 css)
在第二个中,我希望按钮位于底部,并且在垂直方向上也有一些间距。在当前示例中,似乎没有空格。
为了解决这个问题,我想避免使用自定义 css 并尝试使用仅在 bootstrap 中可用的内容来解决这个问题。
最佳答案
使用下面的代码
<form role="form">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3">
<div class="form-group">
<label for="name">First name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3">
<div class="form-group">
<label for="address">Second name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3">
<div class="form-group">
<label for="email">Email</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3">
<div class="form-group">
<label for="pwd">Password</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
</div>
<div class="col-xs-12">
<div class="form-group col-md-4">
<button type="submit" class="btn btn-default">Register</button>
</div>
</div>
</div>
</form>
关于css - Twitter bootstrap 可更改的垂直/水平形式布局,只需少量修改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43845313/