Почему кнопка выезжает за пределы колонки (Bootstrap)?

Question

[wideShift]

Изучаю Bootstrap, наткнулся на такую особенность. Как исправить?

При уменьшении страницы кнопка уезжает за край страницы.

<div class="container">
			<div class="row">
				<div class="col-11">
					<input class="form-control" type="text">
				</div>
				<div class="col-1">
					<button type="button" class="btn btn-primary">Search</button>
				</div>
			</div>
		</div>

Answer 1

[y0u]

Во первых, row - это строка, а не колонка. То, что у вас выделено синим - строка.
Во вторых - ширина кнопки в данном примере больше, чем ширина колонки, потому и вылезает.

Увеличьте размер колонки.

А лучше всего используйте правильный компонент для такого случая:
https://getbootstrap.com/docs/4.4/components/input...

Comments

[wideShift]

Как сделать чтобы кнопка не выезжала за пределы 12 колонок?

[y0u]

wideShift, я написал - увеличьте размер колонки или уменьшите размер кнопки. Вы ответ читали?