#forms #input #bootstrap-4 #flexbox #alignment
#формы #ввод #начальная загрузка-4 #flexbox #выравнивание
Вопрос:
Пожалуйста, проверьте фрагмент в режиме полной страницы. Первая панель навигации в порядке. Я попытался уменьшить ширину ввода поиска, но когда я это делаю, я больше не могу заставить ссылки полностью перемещаться вправо, как в первом примере. Может кто-нибудь объяснить, что контролирует ширину формы и как мне настроить ее для достижения желаемого результата
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title>Bootstrap Sandbox</title>
</head>
<body>
<nav class='navbar navbar-expand-md bg-primary navbar-light mb-3'>
<div class='container'>
<a class='navbar-brand' href="#">NavBar </a>
<button class="navbar-toggler" data-toggle='collapse' data-target='#navbarNav2'>
<span class='navbar-toggler-icon'></span>
</button>
<div id='navbarNav2' class='collapse navbar-collapse '>
<ul class='navbar-nav ml-auto'>
<li class='nav-item'>
<a class='nav-link' href="#">Home</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">About</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Services</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Contact</a>
</li>
</ul>
<form class="form-inline justify-content-end ">
<input type="text" class="form-control " placeholder='Search'>
<button class="btn btn-outline-success">Search</button>
</form>
</div>
</div>
</nav>
<nav class='navbar navbar-expand-md bg-primary navbar-light'>
<div class='container'>
<a class='navbar-brand' href="#">NavBar </a>
<button class="navbar-toggler" data-toggle='collapse' data-target='#navbarNav3'>
<span class='navbar-toggler-icon'></span>
</button>
<div id='navbarNav3' class='collapse navbar-collapse '>
<ul class='navbar-nav ml-auto'>
<li class='nav-item'>
<a class='nav-link' href="#">Home</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">About</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Services</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Contact</a>
</li>
</ul>
<form class="form-inline justify-content-end ">
<input type="text" class="form-control w-50" placeholder='Search'>
<button class="btn btn-outline-success">Search</button>
</form>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV 2 9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck 5T" crossorigin="anonymous"></script>
</body>
Ответ №1:
Я думаю, что ширина формы основана на объединенной ширине кнопки поиска и элемента ввода (с его шириной по умолчанию).
При использовании w-50 ширина ввода уменьшается до половины ширины формы, которая, в свою очередь, основана на ширине элемента ввода по умолчанию.
Итак, вместо настройки width:50%
, если вы можете установить ширину на фиксированное значение, например width:8em
, вы можете достичь ожидаемых результатов.