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

问题描述 投票：0回答：1

我尝试了多种解决方案，但无法实现我想要实现的目标。我已经建立了一个控制树莓派上不同组件的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>

这些按钮似乎在中心但以某种方式居中，但如果屏幕变小，则这些按钮将停留在左侧。

button bootstrap-4 alignment center
1个回答
0
投票

我不确定我是否完全理解你想做什么，但也许只是从所有地方删除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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.