Как перенести элемент формы обратной связи при определенной ширине браузера?

Question

[sunnyrio]

Как перенести элемент формы обратной связи при определенной ширине браузера, чтобы перенос произошел пока слева и справа от формы есть пространство по 70пикселей?

Answer 1

[Павел Корнилов]

flex-wrap: wrap;

Comments

[sunnyrio]

сделал media query 1009px - flex-wrap: wrap; не переноситься на этой ширине

[Павел Корнилов]

sunnyrio, смотреть надо, давайте ссылку.
А какой у флекса basis?

[sunnyrio]

Павел Корнилов, по умолчанию я для последнего элемента установил flex-wrap; для кнопки

[Павел Корнилов]

sunnyrio, может не быть переноса из-за большого flex-basis.
Попробуйте уменьшить его точно по размеру формы. Тогда, при уменьшении экрана, когда форма перестанет помещаться - перенос просто обязан быть.
flex ставить на саму форму.

[sunnyrio]

Павел Корнилов, сделал flex-basis для кнопки побольше она теперь перемещается на новую стоку но при этом и ее размер меняется, как сделать чтобы размер оставался какой и был изначально?

[Павел Корнилов]

sunnyrio, не для кнопки басис, а для всей формы. Нужно ограничить её по максимальному габариту.

[sunnyrio]

Павел Корнилов, мне для нужно flex-basis выставить?

[Павел Корнилов]

sunnyrio, переформулируйте. У меня штатный экстрасенс только что застрелился.

[sunnyrio]

<div class="section4">
			<p>Take action</p>
<!-- Форма обратной свзяи | Bootstrap 4 -->
			<form class="form-inline">
			  <div class="form-group">
				<input type="name" class="form-control-1" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Name">
			  </div>
			  <div class="form-group">
				<input type="phone" class="form-control-1" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Contact Phone">
			  </div>
			  <div class="form-group">
				<input type="email" class="form-control-2" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email">
			  </div>
			  <button type="submit" class="btn btn-primary bform-btn">Sign Up</button>
			</form>		
<!-- Форма обратной свзяи | Bootstrap 4 -->
		</div>

[sunnyrio]

Павел Корнилов, для какого из этих элементов нужно установить flex-basis чтобы кнопка перескакивала на следующую строку при нужной мне ширине браузера?

[Павел Корнилов]

sunnyrio, https://codepen.io/KorniloFF/pen/PVXqxY?editors=1100
Форкните и дополните своими стилями.

[sunnyrio]

Павел Корнилов, https://codepen.io/sunnyrio/pen/omJXrJ?editors=1100

[sunnyrio]

Павел Корнилов, все

[Павел Корнилов]

sunnyrio, https://codepen.io/KorniloFF/pen/aXPvzj?editors=1100
Как я и говорил - всё прекрасно переносится.
Не забудьте ответом отметить.

[sunnyrio]

Павел Корнилов, переноситься должно раньше пока слева и справа от формы есть простанство пикселей по 70

[sunnyrio]

Павел Корнилов, ведь я сам назначаю Media query

[sunnyrio]

Павел Корнилов,

[Павел Корнилов]

https://codepen.io/KorniloFF/pen/aXPvzj?editors=1100

[sunnyrio]

Павел Корнилов, а flex: 0 0; это что такое?

[Павел Корнилов]

sunnyrio, сокращённая запись для grow / shrink

[sunnyrio]

Павел Корнилов, а где в коде flex-basis про который ты говорил?

[Павел Корнилов]

sunnyrio, я его заменил на width для достижения нужных отступов.

[sunnyrio]

Павел Корнилов, то есть ты установил ширину элементу 100% - 140px и когда у меня справа отступ меньше чем в 140 пикселей то кнопка переноситься

[Павел Корнилов]

sunnyrio, да, там тебе подрепитировать нужно, чтобы эти 140рх на 2 стороны по 70 распределялись. Я не стал уж с этим заморачиваться. Может, форме margin:auto задать или ещё что...

[Павел Корнилов]

Вопрос был в переносе кнопки - мы его решили.