将多个提交按钮居中 Bootstrap 4
Center multiple Submit Buttons With Bootstrap 4
我尝试了多种解决方案，但无法实现我想要实现的目标。
我构建了一个 php 文件来控制 raspberry pi 上的不同组件。因此，无论分辨率是多少（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>
按钮似乎以某种方式位于中心但左对齐，如果屏幕变小，按钮将粘在左侧。
我不确定我是否完全理解你想要什么，但也许只是从所有地方删除 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>
我尝试了多种解决方案，但无法实现我想要实现的目标。 我构建了一个 php 文件来控制 raspberry pi 上的不同组件。因此，无论分辨率是多少（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>
按钮似乎以某种方式位于中心但左对齐，如果屏幕变小，按钮将粘在左侧。
我不确定我是否完全理解你想要什么，但也许只是从所有地方删除 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>