Как переместить кнопку под вход?

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

Answer 1

Кнопка является встроенным элементом. Итак, что вы можете сделать, это сделать его блочным элементом.

Способ 1: Как вы упоминали, вы используете Bootstrap. Поэтому добавьте класс d-block к кнопке.

Способ 2: В общем случае добавьте это в css файл:

button {
 display: block;
}

Answer 2

Просто оберните 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>

Answer 3

Вы можете:

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

et c.

Answer 4

Кнопка и поля ввода в настоящее время настроены для отображения: inline. Если вы хотите, чтобы они использовали всю строку, вы можете использовать display: block

Bootstrap имеет класс d-block, который можно добавить к вашему элементу, чтобы изменить тип отображения на block.

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

Answer 5

Попробуйте использовать 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>

Answer 6

Для этого есть несколько способов, вы можете просто изменить отображение ввода на блок, например:

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

или более сложным способом, например, использовать flex:

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

или просто переместите поле ввода в элемент <div>.

Answer 7

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>