嗨，我正在尝试在引导4中实现以下目标。我有一个苗条的横幅图像，我需要在上面垂直对齐三个按钮。他们也应该作出反应。请看下面的图像。这张图中的标志是苗条横幅本身的一部分。两端的填充量为106像素。我很困惑，怎么实现？它在手机上有一个不同的显示按钮将堆叠在另一个按钮的顶部。
我已经从主文件中删除了我的代码
<!doctype html>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
。btn-周中-必须{
width: 184px;
height: 48px;
color: #41173F;
font-family: "Proxima Nova";
font-size: 14px;
font-weight: 600;
line-height: 20px;
text-align: center;
text-decoration: none !important;
background-color: #FFFFFF;
margin: 0 15px;
}
。ButtonList{position:absolute；top:0px；right:0px；padding:51px 30px；}
/* Media Query for 768px */
@media（max-width:768px){.buttonlist{position:absolute；top:0px；right:0px；padding:24px 30px；}.btn-Middweek-must{width:120px；height:40px；color:#41173f；font-family:“Proxima Nova”；font-size:14px；font-weight:600；line-height:20px；text-align:center；text-decortion:none！重要信息；
}
</style>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="row mt-5">
<div class="col col-12">
<picture>
<source media="(max-width:767px)" srcset="/Users/bzest/Beenish 2020/Web Development Bootstrap/midweek musts/slim-midweek-m@2x.png"/>
<img src="/Users/bzest/Beenish 2020/Web Development Bootstrap/midweek musts/slim-midweek.png" srcset="/Users/bzest/Beenish 2020/Web Development Bootstrap/midweek musts/slim-midweek@2x 2x" />
</picture>
<div class="buttonList ">
<button class="btn-primary btn-midweek-Must cta body-font">
<a href="$url('Search-Show','cgid','mid-week-250')$" >
Under $250 › </a></button>
<button class="btn-primary btn-midweek-Must cta body-font">
<a href="$url('Search-Show','cgid','mid-week-500')$" >Under $500 ›</a></button>
<button class="btn-primary btn-midweek-Must cta body-font">
<a href="$url('Search-Show','cgid','mid-week-1000')$" >Under $1000 ›</a></button>
</div>
</div>
</div>
</div>
柔性
快速管理网格列的布局，对齐和大小调整，导航，组件等，使用全套快速响应的flexbox实用程序:Bootstrap Flex
如果内容的高度是固定的，您可以使用flexdisplay并按以下方式执行:
null
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="d-flex align-items-center justify-content-around p-2 bg-light" style="height: 100px">
<div>
<span class="border p-2">
logo
</span>
</div>
<div>
<button class="btn btn-success">btn 1</button>
<button class="btn btn-success">btn 2</button>
<button class="btn btn-success">btn 3</button>
</div>
</div>
</body>
</html>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="form-inline my-2 my-lg-0 mx-auto">
<button class="btn btn-outline-success my-2 my-sm-0 ml-3" type="submit">Button 1 </button>
<button class="btn btn-outline-success my-2 my-sm-0 ml-3" type="submit">Button 2</button>
<button class="btn btn-outline-success my-2 my-sm-0 ml-3" type="submit">Button 3</button>
</div>
</div>
</nav>
