blocks|key|1759751|text|简单地说，将button和input包装在form-group目录中，就好了！|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1759752|++<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>|code-block|syntax|javascript|1759753|entityMap^0|6|6|D|5|L|A|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

<p>Simply, wrap the <code>button</code> and <code>input</code> inside <code>form-group</code> div and voila!</p>

<pre><code>  &lt;div class="form-group"&gt;
            &lt;input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99"&gt;
  &lt;/div&gt;
   &lt;div class="form-group"&gt;
            &lt;button type="button"&gt;
                Sprawdź
            &lt;/button&gt;
  &lt;/div&gt;
</code></pre>


blocks|key|1777644|text|按钮是一个内联元素。所以你能做的就是把它变成一个块元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1777645|方法1:正如你提到的，你正在使用Bootstrap。因此，将类d-block添加到按钮。|offset|length|style|CODE|1777646|方法2:一般情况下，将这个添加到css文件中：|1777647|button+{
+display:+block;
}|code-block|syntax|javascript|1777648|entityMap^0|0|V|7|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|V|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Button is an inline element. So what you can do is make it a block element.</p>

<p>Way 1: As you mentioned you are using Bootstrap. So add class <code>d-block</code> to button.</p>

<p>Way 2: In general add this to css file :</p>

<pre><code>button {
 display: block;
}
</code></pre>


blocks|key|1759755|text|Bootstrap作为帮助类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1759756|++++++++++++<form+class="d-flex+flex-column+align-items-start">|code-block|syntax|javascript|1759757|​|1759758|.card+{
++background:+rgba(18,+13,+33,+.8)!important;
++color:+#d7eaf4;
++box-shadow:+0+5px+15px+#000000c0;
++box-sizing:+border-box;
}|1759759|<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>|1759760|1759761|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|R|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|M|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Bootstrap as help classes for that:</p>

<pre><code>            &lt;form class="d-flex flex-column align-items-start"&gt;
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.card {
  background: rgba(18, 13, 33, .8)!important;
  color: #d7eaf4;
  box-shadow: 0 5px 15px #000000c0;
  box-sizing: border-box;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /&gt;
&lt;div class="card"&gt;
  &lt;div class="card-body text-center"&gt;
    &lt;h5 class="card-title mb-2"&gt;
      text string
    &lt;/h5&gt;
    &lt;div class="subtitle mb-3"&gt;
      by me
    &lt;/div&gt;
    &lt;form class="d-flex flex-column align-items-start"&gt;
      &lt;input type="text" placeholder="Numer pokoju" name="numerPokoju" required=""&gt;
      &lt;input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99"&gt;
      &lt;button type="button"&gt;
						Sprawdź
					&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1777650|text|有几种方法可以实现这一点，你可以简单地将输入显示更改为块，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1777651|input[type=text]+{
++++display:block;
}|code-block|syntax|javascript|1777652|或者更复杂的方式是使用flex，例如：|1777653|.form-container+{
++display:flex;
++flex-direction:column;
}|1777654|或者只是将输入字段移动到<div>元素中。|offset|length|style|CODE|1777655|entityMap^0|0|0|0|0|C|5|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

blocks|key|1759763|text|尝试使用documentation中的引导程序类|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1759764|​|1759765|<link+rel="stylesheet"+href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"+integrity="sha384-Vkoo8x4CGsO3%2BHhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"+crossorigin="anonymous">

<form>
++<div+class="form-group">
++++<label+for="exampleInputEmail1">Email+address</label>
++++<input+type="email"+class="form-control"+id="exampleInputEmail1"+aria-describedby="emailHelp">
++++<small+id="emailHelp"+class="form-text+text-muted">We'll+never+share+your+email+with+anyone+else.</small>
++</div>
++<div+class="form-group">
++++<label+for="exampleInputPassword1">Password</label>
++++<input+type="password"+class="form-control"+id="exampleInputPassword1">
++</div>
++<div+class="form-group+form-check">
++++<input+type="checkbox"+class="form-check-input"+id="exampleCheck1">
++++<label+class="form-check-label"+for="exampleCheck1">Check+me+out</label>
++</div>
++<button+type="submit"+class="btn+btn-primary">Submit</button>
</form>|code-block|syntax|javascript|1759766|1759767|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.4/components/forms/^0|4|D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@]|C|$I|J]]|$1|K|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]]]

<p>Try to use Bootstrap classes from <a href="https://getbootstrap.com/docs/4.4/components/forms/" rel="nofollow noreferrer">documentation</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"&gt;

&lt;form&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="exampleInputEmail1"&gt;Email address&lt;/label&gt;
    &lt;input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"&gt;
    &lt;small id="emailHelp" class="form-text text-muted"&gt;We'll never share your email with anyone else.&lt;/small&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="exampleInputPassword1"&gt;Password&lt;/label&gt;
    &lt;input type="password" class="form-control" id="exampleInputPassword1"&gt;
  &lt;/div&gt;
  &lt;div class="form-group form-check"&gt;
    &lt;input type="checkbox" class="form-check-input" id="exampleCheck1"&gt;
    &lt;label class="form-check-label" for="exampleCheck1"&gt;Check me out&lt;/label&gt;
  &lt;/div&gt;
  &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1777657|text|按钮和输入字段当前设置为display:inline。如果希望它们使用整行，可以使用display:+block|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1777658|Bootstrap有一个名为d-block的类，可以将它添加到元素中以将显示类型更改为block。|1777659|<button+type="button"+class="d-block">
++++Sprawdź
</button>|code-block|syntax|javascript|1777660|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>The button and the input fields are currently set to display:inline. If you want them to use the whole line you can use display: block</p>

<p>Bootstrap has a class called d-block which can be added to your element to change the display type to block.</p>

<pre><code>&lt;button type="button" class="d-block"&gt;
    Sprawdź
&lt;/button&gt;
</code></pre>


blocks|key|1759769|text|您可以：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1759770|1|1759771|button+{
++++display:+block;
}|code-block|syntax|javascript|1759772|2|1759773|<form>
++++<input+type="text"+placeholder="Numer+pokoju"+name="numerPokoju"+required="">
++++<input+name="csrf"+type="hidden"+value="46d2ce8a-2271-471f-a46f-c58234324e99">
++++<br>
++++<button+type="button">
++++++++Sprawdź
++++</button>
</form>|1759774|3.|1759775|input+{
++++width:+100%25;
}|1759776|4.|1759777|等。|1759778|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

<p>You can:</p>

<h1>1</h1>

<pre><code>button {
    display: block;
}
</code></pre>

<h1>2</h1>

<pre><code>&lt;form&gt;
    &lt;input type="text" placeholder="Numer pokoju" name="numerPokoju" required=""&gt;
    &lt;input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99"&gt;
    &lt;br&gt;
    &lt;button type="button"&gt;
        Sprawdź
    &lt;/button&gt;
&lt;/form&gt;
</code></pre>

<h1>3</h1>

<pre><code>input {
    width: 100%;
}
</code></pre>

<h1>4</h1>

<p>etc.</p>


<p>I have a quite weird problem, which I can't find solution on </p>

<p>So basically what I want is to make is to bring button under the input file (I'm using Bootstrap), but have no idea how to do that</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
	&lt;input type="text" placeholder="Numer pokoju" name="numerPokoju" required=""&gt;
	&lt;input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99"&gt;
	&lt;button type="button"&gt;
		Sprawdź
	&lt;/button&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p>here's the visualization <a href="https://codepen.io/Zeczero/pen/MWwJdvj" rel="nofollow noreferrer">on CodePen</a></p>


How to move a button under input?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个很奇怪的问题，我找不到解决办法所以基本上我想做的就是把按钮带到输入文件下(我用的是Bootstrap)，但是我不知道怎么做​<form><input type="text" placeholder="Numer pokoju" name="numerPokoju" required=""><input name...

问如何在input下移动按钮？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在input下移动按钮？EN