如何在input下移动按钮？
如何在input下移动按钮？
提问于 2020-02-25 21:03:07
我有一个很奇怪的问题，我找不到解决办法
所以基本上我想做的就是把按钮带到输入文件下(我用的是Bootstrap)，但是我不知道怎么做
<form>
<input type="text" placeholder="Numer pokoju" name="numerPokoju" required="">
<input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
<button type="button">
Sprawdź
</button>
</form>
这是可视化的on CodePen
回答 7
Stack Overflow用户
发布于 2020-02-25 21:09:10
简单地说，将button和input包装在form-group目录中，就好了！
<div class="form-group">
<input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
</div>
<div class="form-group">
<button type="button">
Sprawdź
</button>
</div>Stack Overflow用户
发布于 2020-02-25 21:11:12
按钮是一个内联元素。所以你能做的就是把它变成一个块元素。
方法1:正如你提到的，你正在使用Bootstrap。因此，将类d-block添加到按钮。
方法2:一般情况下，将这个添加到css文件中：
button {
display: block;
}Stack Overflow用户
发布于 2020-02-25 21:11:24
Bootstrap作为帮助类：
<form class="d-flex flex-column align-items-start">
.card {
background: rgba(18, 13, 33, .8)!important;
color: #d7eaf4;
box-shadow: 0 5px 15px #000000c0;
box-sizing: border-box;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
<div class="card-body text-center">
<h5 class="card-title mb-2">
text string
</h5>
<div class="subtitle mb-3">
by me
</div>
<form class="d-flex flex-column align-items-start">
<input type="text" placeholder="Numer pokoju" name="numerPokoju" required="">
<input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
<button type="button">
Sprawdź
</button>
</form>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60395284
复制相关文章
相似问题
腾讯云开发者
