gpt4 book ai didi

twitter-bootstrap - Bootstrap v4 表单,同一行有 3 个输入 + 按钮

转载 作者:太空宇宙 更新时间:2023-11-04 09:01:50 27 4
gpt4 key购买 nike

我想在同一行创建具有 3 个输入字段 + 按钮的表单,但我不知道如何制作它。
我正在使用 Bootstrap v4 来设计表单。

Here is a picture of my broken design: Click here

我的代码

<div class="col-sm-7 mx-auto bg-faded">
<form class="form-inline" action="index.html" method="post">
<div class="form-group">
<label class="mr-2" for="">First Name</label>
<input type="text" name="" value="">
</div>
<div class="form-group">
<label class="mr-2 ml-2" for="">Last Name</label>
<input type="text" name="" value="">
</div>
<div class="form-group">
<label class="mr-2 ml-2" for="">Nickname</label>
<input type="text" name="" value="">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

最佳答案

表单的宽度受其容器的限制,因此它是换行的。如果你想强制它不换行,使用d-flex flex-nowrap flexbox utils:

     <form class="form-inline d-flex flex-nowrap" action="index.html" method="post">
<div class="form-group">
<label class="mr-2" for="">First Name</label>
<input type="text" name="" value="">
</div>
<div class="form-group">
<label class="mr-2 ml-2" for="">Last Name</label>
<input type="text" name="" value="">
</div>
<div class="form-group">
<label class="mr-2 ml-2" for="">Nickname</label>
<input type="text" name="" value="">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

演示:http://www.codeply.com/go/jTDnk5KxGc

关于twitter-bootstrap - Bootstrap v4 表单,同一行有 3 个输入 + 按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42711094/

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