时间戳

首页 > 解决方案 > 使用 Bootstrap 4 居中多个提交按钮

button - 使用 Bootstrap 4 居中多个提交按钮

问题描述

我尝试了多种解决方案，但我无法实现我想要实现的目标。我已经构建了一个 php 文件来控制树莓派上的不同组件。因此，无论分辨率是多少（xl、lg、md、sm），我都有 4 行按钮，我想将它们放在屏幕中间作为响应式设计。

到目前为止的代码是：

<!DOCTYPE html>
<html lang='us'>
<head>
	<!-- Required meta tags -->
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
	<!-- Bootstrap CSS -->
	<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' integrity='sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO' crossorigin='anonymous'>
	<meta name='viewport' content='width=device-width' />
	<style>
	.input-group-button {
		padding: 0;
		border:none;
		background: none;
	}
	.input-group .input-group-button:first-child .btn{
			border-top-right-radius:0;
			border-bottom-right-radius:0;
	}
	.input-group .input-group-button:last-child .btn{
			border-top-left-radius:0;
			border-bottom-left-radius:0;
	}
	.input-group select.form-control{
		-webkit-appearance: none;
	}
	</style>
 	
</head>
<body>
	<form class='justify-content-center' method='post' action='../index.php'>
		<div class='row justify-content-center form-group'>
    		<div class='col-xl-2 col-lg-2 col-md-2 col-sm-2 text-center'>
				<div class='input-group'>
					<select name='2812efct' id='2812efct' class='form-control'>
						<option selected>Select Effects</option>
						<option value='0'>All Effects</option>
						<option value='1'>Effect 1</option>
						<option value='2'>Effect 2</option>
						<option value='3'>Effect 3</option>
					</select>
					<div class='input-group-addon input-group-button'>
						<button type='submit' class='btn btn-secondary' value='2812Effect' name='2812Effect'>Set Effect</button>
					</div>
				</div>
			</div>
		</div>
		<div class='row justify-content-center form-group'>
			<div class='btn-group col-xl-1 col-lg-1 col-md-1 col-sm-1 text-center' role='group'>
				<button class='btn btn-secondary' type='submit' value='up' name='up'>Up</button>
				<button class='btn btn-secondary' type='submit' value='down' name='down'>Down</button>
			</div>
		</div>
		<div class='row justify-content-center form-group'>
			<div class='btn-group col-xl-1 col-lg-1 col-md-1 col-sm-1 text-center' role='group'>
				<button class='btn btn-secondary' type='submit' value='ledOn' name='ledOn'>LED On</button>
				<button class='btn btn-secondary' type='submit' value='ledOff' name='ledOff'>LED Off</button>
			</div>
		</div>
		<div class='row justify-content-center form-group'>
			<div class='btn-group col-xl-1 col-lg-1 col-md-1 col-sm-1 text-center' role='group'>
				<button class='btn btn-secondary btn-lg' type='submit' value='stop' name='stop'>Stop</button>
			</div>
		</div>
	</form>
	<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.3/js/bootstrap.min.js' integrity='sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy' crossorigin='anonymous'></script>
</body>
</html>

按钮似乎以某种方式位于中心但左对齐，如果屏幕变小，按钮将粘在左侧。

标签： buttonbootstrap-4alignmentcenter

解决方案

我不确定我是否完全理解 yu wanr，但也许只是col-xl-2 col-lg-2 col-md-2 col-sm-2从任何地方删除。

.input-group-button {
		padding: 0;
		border:none;
		background: none;
	}
	.input-group .input-group-button:first-child .btn{
			border-top-right-radius:0;
			border-bottom-right-radius:0;
	}
	.input-group .input-group-button:last-child .btn{
			border-top-left-radius:0;
			border-bottom-left-radius:0;
	}
	.input-group select.form-control{
		-webkit-appearance: none;
	}
<!DOCTYPE html>
<html lang='us'>
<head>
	<!-- Required meta tags -->
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
	<!-- Bootstrap CSS -->
	<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' integrity='sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO' crossorigin='anonymous'>
	<meta name='viewport' content='width=device-width' />
 
</head>
<body>
	<form class='justify-content-center' method='post' action='../index.php'>
		<div class='row justify-content-center form-group'>
    		<div class='text-center'>
				<div class='input-group'>
					<select name='2812efct' id='2812efct' class='form-control'>
						<option selected>Select Effects</option>
						<option value='0'>All Effects</option>
						<option value='1'>Effect 1</option>
						<option value='2'>Effect 2</option>
						<option value='3'>Effect 3</option>
					</select>
					<div class='input-group-addon input-group-button'>
						<button type='submit' class='btn btn-secondary' value='2812Effect' name='2812Effect'>Set Effect</button>
					</div>
				</div>
			</div>
		</div>
		<div class='row justify-content-center form-group'>
			<div class='btn-group text-center' role='group'>
				<button class='btn btn-secondary' type='submit' value='up' name='up'>Up</button>
				<button class='btn btn-secondary' type='submit' value='down' name='down'>Down</button>
			</div>
		</div>
		<div class='row justify-content-center form-group'>
			<div class='btn-group text-center' role='group'>
				<button class='btn btn-secondary' type='submit' value='ledOn' name='ledOn'>LED On</button>
				<button class='btn btn-secondary' type='submit' value='ledOff' name='ledOff'>LED Off</button>
			</div>
		</div>
		<div class='row justify-content-center form-group'>
			<div class='btn-group text-center' role='group'>
				<button class='btn btn-secondary btn-lg' type='submit' value='stop' name='stop'>Stop</button>
			</div>
		</div>
	</form>
	<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.3/js/bootstrap.min.js' integrity='sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy' crossorigin='anonymous'></script>
</body>
</html>

推荐阅读