Bootstrap: как сделать кнопку такой же ширины, как текстовое поле в мобильном представлении?

На больших экранах кнопка находится в той же строке, что и текстовое поле, но при увеличении, как и на небольших экранах, я хочу, чтобы кнопка располагалась под текстовым полем, но имела ту же ширину. Я не могу заставить его работать. Это мой код:

<!DOCTYPE html>
<html Lang = "en">
    <head>
        <meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity = "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin = "anonymous">
    </head>
    <body>
        <form method = "GET" id = "target" class = "form-inline justify-content-center">
            <div class = "form-row justify-content-center text-center">
                <div class = "form-group form-inline">                  
                    <input type='text' class ='form-control mb-2 mr-sm-2 mb-sm-0 input-group' id='keyword' maxlength='25' placeholder = "Text">
                </div>
                <input type = "submit" class = "btn btn-primary input-group mb-2 mr-sm-2 mb-sm-0 text-center rounded-0 justify-content-center" value = "Text">
            </div>
        </form>
    </body>
</html>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
67
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете поместить кнопку внутри div родителя input:

<!DOCTYPE html>
<html Lang = "en">
  <head>
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity = "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin = "anonymous">
  </head>
  <body>
    <form method = "GET" id = "target" class = "form-inline justify-content-center">
      <div class = "form-row justify-content-center text-center">
        <div class = "form-group form-inline">                  
         <input type='text' class ='form-control mb-2 mr-sm-2 mb-sm-0 input-group' id='keyword' maxlength='25' placeholder = "Text">
         <input type = "submit" class = "btn btn-primary input-group mb-2 mr-sm-2 mb-sm-0 text-center rounded-0 justify-content-center" value = "Text">
       </div>
     </div>
   </form>
 </body>
</html>

Другие вопросы по теме