Выравнивание входных данных Bootstrap по вертикали на мобильном устройстве и горизонтально на рабочем столе - PullRequest
Новая
       9

Выравнивание входных данных Bootstrap по вертикали на мобильном устройстве и горизонтально на рабочем столе

0 голосов
/ 20 апреля 2020

У меня есть следующий код: 

<form>
    <div class="row">
        <div class="col-md-8">
            <label class="sr-only" for="first-name">First name</label>
            <input type="text" class="form-control mr-2" id="first-name" name="first_name" required>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <label class="sr-only" for="last-name">Last Name</label>
            <input type="text" class="form-control mr-2" id="last-name" name="last_name" required>
        </div>

        <div class="col-md-2">
            <button type="button" class="btn btn-success">
                Submit
            </button>
        </div>
    </div>
</form>

Это выглядит так, как на мобильном: enter image description here

Я пытался добавить col-md-offset-4 к div с входами.

Я пытался добавить justify-content-center к divs.

Когда я нахожусь на рабочем столе, мне нужно, чтобы они были выровнены так, чтобы у меня был класс form-inline, добавленный JS при больших разрешениях: enter image description here

Как настроить выравнивание по центру с помощью кнопки отправки, но при этом сохранить ожидаемое выравнивание на рабочем столе?

Ответы [ 2 ]

0 голосов
/ 20 апреля 2020

Я не правильно понимаю ваш вопрос, но я пытался решить его. 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<form>
  <div class="row m-0">
    <div class="offset-md-2 col-md-8">
      <label class="sr-only" for="first-name">First name</label>
      <input type="text" class="form-control mr-2" id="first-name" name="first_name" required>
    </div>
  </div>

  <div class="row m-0">
    <div class="offset-md-2 col-md-8">
      <label class="sr-only" for="last-name">Last Name</label>
      <input type="text" class="form-control mr-2" id="last-name" name="last_name" required>
    </div>

    <div class="col-md-2 text-center text-md-left mt-3 mt-md-0">
      <button type="button" class="btn btn-success">Submit</button>
    </div>
  </div>
</form>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
0 голосов
/ 20 апреля 2020

Вы должны изменить свой код, как показано ниже 

<form>
    <div class="row">
        <div class="col-md-4 offset-md-2">
            <label class="sr-only" for="first-name">First name</label>
            <input type="text" class="form-control mr-2" id="first-name" name="first_name" required="">
        </div>
        <div class="col-md-4">
            <label class="sr-only" for="last-name">Last Name</label>
            <input type="text" class="form-control mr-2" id="last-name" name="last_name" required="">
        </div>
        <div class="col-md-2">
        <button type="button" class="btn btn-success">
                Submit
            </button>
            </div>
    </div>

</form>

см. Вывод ниже в полноэкранном режиме, если вы хотите, чтобы это работало и для небольшого экрана, то вы должны класс col-sm-4 для примера. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  
  
  <form>
    <div class="row">
        <div class="col-md-4 offset-md-2">
            <label class="sr-only" for="first-name">First name</label>
            <input type="text" class="form-control mr-2" id="first-name" name="first_name" required="">
        </div>
        <div class="col-md-4">
            <label class="sr-only" for="last-name">Last Name</label>
            <input type="text" class="form-control mr-2" id="last-name" name="last_name" required="">
        </div>
        <div class="col-md-2">
        <button type="button" class="btn btn-success">
                Submit
            </button>
            </div>
    </div>

</form>
  
  
  
</div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...