На больших экранах кнопка находится в той же строке, что и текстовое поле, но при увеличении, как и на небольших экранах, я хочу, чтобы кнопка располагалась под текстовым полем, но имела ту же ширину. Я не могу заставить его работать. Это мой код:
<!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>
Вы можете поместить кнопку внутри 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>