Задать вопрос
@zzmaster

Большая и широкая кнопка в Bootstrap3 — возможно?

Хочу сделать форму из пары полей и сабмит кнопки той же ширины, что и поля. При этом, кнопку хотелось бы посолидней. Для последнего в Bootstrap есть класс btn-lg.
Пишу такой код
<form method="get" action='#' class="forma">
		<div class="form-group">
			<label for="day" class="text-left"><?= t('birthday') ?></label>
			<input class="form-control" type="date" name="day" value="<?= $day ?>" />
		</div>
		<div class="form-group">
			<label for="day" class="text-left"><?= t('name') ?></label><br>
			<input class="form-control" type="text" name="name" value="<?= $name ?>" />
		</div>
		<label >&nbsp;</label>
		<button class="form-control btn btn-warning btn-lg">
			<?= t('calculate') ?>
		</button>
	</form>

внизу - та самая кнопка. Получаю такую картинку
3b7ef4d211874d4f8ba7244ce1f48c82.jpg
Кнопка осталась, какой была, увеличился шрифт ее текста и он сместился вниз. OK, убираю form-control из классов кнопки, получаю то, что ожидалось в плане размера кнопки по вертикали и шрифта, но кнопки стала уже:
10b5797a9a654216989c8f48104fd299.jpg

1. А можно ли как-то сделать все таки большую кнопку btn-lg с размером, выровненным по размеру инпута? (вроде, вполне невинное желание...)
2. А мне, вообще-то хотелось бы кнопку еще больше. Если я увеличу ей padding, font-size, width то не аукнется ли это на хваленной кроссбраузерности Бутстрапа?
  • Вопрос задан
  • 945 просмотров
Подписаться 1 Оценить Комментировать
Решения вопроса 1
mannaro
@mannaro
Умею профессионально гуглить
Пригласить эксперта
Ответы на вопрос 3
@vylegzhanin
Совсем уже поехали со своим бутстрапом.
А просто width: 100%; box-sizing: border-box; сделать не вариант?
Ответ написан
@Wheelie
А как простите "padding, font-size, width" влияет на кроссбраузерность в данном случае? Если вы переопределите класс кнопки, это всплывет в других местах где эта кнопка используется. Это другой разговор.

Что-то в стиле .login_form input[type=submit] и пишите чо душе угодно
Ответ написан
Есть еще такой вариант:
<button type="button" class="btn btn-danger btn-lg btn-block" style="width: 95%;margin: 5px auto;">Тут текст</button>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы