gpt4 book ai didi

html - 在 bootstrap 3 水平形式中组合输入组和形式组

转载 作者:技术小花猫 更新时间:2023-10-29 12:23:05 25 4
gpt4 key购买 nike

我用 3 个输入元素制作了一个 jsfiddle:http://jsfiddle.net/zb4dc/1/

如您所见,它们并没有很好地对齐。如何做到这一点?

<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputfield1" class="col-sm-2 control-label">Input 1</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputfield1" placeholder="Input 1">
</div>
</div>
<div class="form-group">
<label for="inputfield2" class="col-sm-2 control-label">Input 2</label>
<div class="controls">
<div class="input-group">
<input type="text" class="form-control" id="inputfield2" placeholder="Input 2">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
<div class="form-group">
<label for="inputfield3" class="col-sm-2 control-label">Input 3</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputfield3" placeholder="Input 3">
</div>
</form>

最佳答案

您刚刚在第二个输入字段中忘记了 col-sm-10。这是您更正后的代码:

<body>
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputfield1" class="col-sm-2 control-label">Input 1</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputfield1" placeholder="Input 1">
</div>
</div>
<div class="form-group">
<label for="inputfield2" class="col-sm-2 control-label">Input 2</label>
<div class="col-sm-10 controls">
<div class="input-group">
<input type="text" class="form-control" id="inputfield2" placeholder="Input 2">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
<div class="form-group">
<label for="inputfield3" class="col-sm-2 control-label">Input 3</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputfield3" placeholder="Input 3">
</div>
</div>
</form>
</div>
</body>

fiddle :http://jsfiddle.net/zb4dc/2/

关于html - 在 bootstrap 3 水平形式中组合输入组和形式组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21171322/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com