css - 在另一个 div bootstrap-4 中垂直居中 div
问题描述
嗨,我正在尝试在 bootstrap 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-midweek-必须{
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{ 位置:绝对;顶部:0px;右:0px;填充:51px 30px;}
/* Media Query for 768px */
@media(max-width:768px){ .buttonList { 位置:绝对;顶部:0px;右:0px;填充:24px 30px;} .btn-midweek-Must { 宽度:120px; 高度:40px;颜色:#41173F;font-family: "Proxima Nova"; 字体大小:14px;字体粗细:600;行高:20px;文本对齐:居中;文字装饰:无!重要;背景颜色:#FFFFFF;边距:0 10px;}
}
</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>
解决方案
<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>
推荐阅读
- java - 如何静音 Apache OpenNLP 日志
- polymer - 如何将polymer2.x 项目转换为polymer3.0?
- path - 在角度 6 的 tsconfig.lib.json 中设置命名路径
- c# - 应用于大量数据时,SQL CLR 聚合未正确终止
- python - django {% url %} NoReverseMatch at /
- sql - 使用联合在 Sql server 中不起作用的三个 IF Exists 条件选择语句结果的组合结果
- swift - 在 swift 3 上永远不会读取演示者功能
- c# - VB 代码到 C# - 命名空间 Microsoft.VisualBasic
- content-management-system - 表达式引擎使用
- android - DJI Spark:IMUState.Callback.getAccelerometerState() 和 getGyroscopeState() 翻转传感器状态