如何将按钮移动到输入框下方？

Question

我有一个相当奇怪的问题，我找不到解决方法。

基本上我想做的是将按钮放置在输入文件下面（我使用的是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>

这是可视化结果，在CodePen上查看

- cssnoobie

---

请在Stack Overflow的问题中包含所有相关代码，而不仅仅是在外部网站上。我已经为您的问题添加了一个Stack Snippet，但您需要添加您尝试过的CSS。 - Heretic Monkey

使用br标签来换行。 - Pete

Answer 1

简单来说，只需将 button 和 input 放在 form-group 的 div 标签中，完成!

  <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>

- Tural Ali

Answer 2

是一个内联元素。所以你可以将其变成块级元素。

方法1：正如你所提到的，你正在使用Bootstrap。因此，将类d-block添加到按钮。

方法2：通常在css文件中添加以下内容：

button {
 display: block;
}

- AKNair

Answer 3

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>

- Paulie_D

Answer 4

尝试使用来自文档的Bootstrap类

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/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>

- Dmytro Cheglakov

Answer 5

有几种方法可以解决这个问题，你可以简单地将输入显示更改为块，例如：

input[type=text] {
    display:block;
}

或者更复杂的方法是使用flex，例如：

.form-container {
  display:flex;
  flex-direction:column;
}

或者将输入字段移动到<div>元素中。

- Beniamin

Answer 6

按钮和输入框当前设置为display:inline。如果您想要它们使用整个行，请使用display:block。

Bootstrap有一个名为d-block的类，可以添加到您的元素中以将显示类型更改为block。

<button type="button" class="d-block">
    Sprawdź
</button>

- Decoolipascal

Answer 7

您可以：

1

button {
    display: block;
}

2

<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>

3

input {
    width: 100%;
}

4

等等。

- Lajos Arpad