Задать вопрос
LongOf
@LongOf
html

Как поставить кнопку по центру в мобильной версии?

Есть блок div, в нем инпут и кнопка, хочу вывести эти элементы в одну строчку. На десктопе получается нормально, а на мобильной версии съезжает влево. Подскажите как выровнять кнопку и сделать отступ по верху только в мобильной версии на Bootstrap. спасибо.
<div class="col-xl-6 col-sm-6">
	<div class="card">
		<div class="card-body">
			<div class="d-flex">
				<div class="flex-grow-1 overflow-hidden">
					<p class="mb-1">Заголовок</p>
						<div class="row">
							<div class="col-md-7 my-auto">
								<input class="form-control" type="text" placeholder="Напишите что-нибудь">
							</div> 
							<div class="col-md-5 my-auto">
								<a href="#" class="btn btn-primary waves-effect waves-light">Кнопка</a>
							</div>    
						</div>   
				</div>
			</div>
		</div>
		<!-- end card-body -->
	</div>
	<!-- end card -->
</div>

63e7bd8e87cf3827255492.png
63e7bd9747a6f087029011.png
  • Вопрос задан
  • 230 просмотров
Комментировать
Подписаться 2 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 3
HardBot
@HardBot
back-end, front-end developer 
display: flex;
flex-direction: column;
justify-content: center;
Ответ написан
4 комментария
4 комментария
noder_ss
@noder_ss
Линуксоид-энтузиаст и SQL разработчик
У меня так получилось:
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div class="col-xl-6 col-sm-6">
    <div class="card">
      <div class="card-body">
        <div class="d-flex">
          <div class="flex-grow-1 overflow-hidden it">
            <p class="mb-1">Заголовок</p>
              <div class="row">
                <div class="col-md-7 my-auto">
                  <input class="form-control" type="text" placeholder="Напишите что-нибудь">
                </div> 
                <div class="col-md-5 my-auto btn">
                  <a href="#" class="btn btn-primary waves-effect waves-light">Кнопка</a>
                </div>    
              </div>   
          </div>
        </div>
      </div>
      <!-- end card-body -->
    </div>
    <!-- end card -->
  </div>
  <style>
      
      
      .btn{
        
          display: flex;
          flex-direction: column;
          align-items: center;
      }
  </style>

Если помог, отметьте решением:)
Ответ написан
Комментировать
Комментировать
efremandre
@efremandre
Frontend Developer
Вижу у вас тут бутстрап, в нем не силен, поэтому подскажу способы без него. Могу подсказать самый простой и старый способ способ это кнопке применить margin: 0 auto. Сделать так чтобы это было только на мобилках можно через медиа-запросы 
@meadia (max-width: 'тут размер экрана, при котором и ниже будет применятся код') {}


Более современный способ 
display: flex;
flex-direction: column;
justify-content: center;


Как пример на флексах накидал


Если помог, отметьте решением, будьте добры. :)
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Дизайн интерьера для заведения
27 апр. 2024, в 21:24
150000 руб./за проект
Нужно добавить несколько параллакс эффектов
27 апр. 2024, в 21:12
500 руб./за проект
Доработать функционал загрузки прайсов в БД
27 апр. 2024, в 20:40
5000 руб./за проект
Ещё заказы