问题描述
我正在尝试通过 bootstrap 4 制作与下图类似的内容。
您可以假设黑色矩形是窗口，绿色是内部包含三个元素的div，它应该垂直居中，红色是文本，橙色是两个按钮。
这是我的代码，但是不起作用：
如果窗口宽度太小，则这三个元素应该排成行。
<div class="row justify-content-md-center">
<div class="col-sm-12">
<span class="btn-projects scrollto">blablablablablablasalkadfjklasd</span>
<span class="row justify-content-md-center">
<span class="col-s-2">
<a href="/" class="btn-get-started scrollto"><i class="fa fa-google"
style="color:tomato;margin-left:4px;"></i></a>
</span>
<span class="col-s-2">
<a href="/" class="btn-get-started scrollto"><i class="fa fa-linkedin"
style="color:tomato;margin-left:4px;"></i></a>
</span>
</span>
</div>
</div>
感谢帮助。
解决方法
使用引导程序的一种好方法是使用col和row引导程序类将内容映射到页面，在您的情况下，一种不错的方法是创建一个{{ 1}}，并在其中使用row类创建3列以进行对齐，我只是使用普通的旧样式来垂直和水平对齐内容：
col
代码与您的代码基本相同，只有适当的重新排列和中心样式，出于示例目的，示例的高度设置为<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row" style="border: 2px solid black;height:150px;padding:0;margin:0">
<div class="col-sm-12" style="display:flex;justify-content:center;align-items:center">
<div class="row"
style="border: 1px solid green;display:flex;justify-content:center;align-items:center;text-align:center">
<span class="col-sm-2">
<a href="/" class="btn-get-started scrollto"> <i class="fa fa-md fa-google" style="color:tomato;"></i></a>
</span>
<span class="col-sm-8" style="border: 1px solid red">blablablablablabla</span>
<span class="col-sm-2">
<a href="/" class="btn-get-started scrollto"> <i class="fa fa-md fa-linkedin" style="color:tomato;"></i></a>
</span>
</div>
</div>
</div>
<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.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>，但是您可以将其设置为150px您希望在项目中达到的高度。我使用的100%相对比例也用于演示目的，您当然可以使用所需的任何尺寸。
我刚刚添加了适当的外部链接，因此可以运行该片段。
请注意，内联样式还用于示例目的，您可以/应该将它们放置在样式表中。
,为child two添加宽度以设置固定宽度。
.black {
border: 1px black solid;
padding: 5% 10%;
margin: 10%;
}
.main {
border: 1px green solid;
padding: 5px;
display: flex;
}
.child{
display: inline-block;
width: 100%;
padding: 15px 0px;
}
.child.one:hover,.child.three:hover{
cursor: pointer;
background-color: #efefef;
}
.child.one{
width: 50px;
border: 1px #ff9800 solid;
text-align: center;
}
.child.two{
width: 100%;
margin: 0px 5px;
padding: 15px;
border: 1px red solid;
}
.child.three{
width: 50px;
border: 1px #ff9800 solid;
text-align: center;
}<div class="black">
<div class="main">
<a class="child one">G</a>
<div class="child two">Hurraaayyy!</div>
<a class="child three">G</a>
</div>
</div>,
您可以根据这些预定义的类 col-sm-12 col-md-7 col-lg-6 col-xl-5 管理行内的 width 。因此，不需要内联CSS。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row justify-content-center border border-dark p-5">
<div class="col-sm-12 col-md-7 col-lg-6 col-xl-5">
<div class="row justify-content-center align-items-center border border-success text-center">
<span class="col-2">
<a href="/" class="text-warning">
<i class="fa fa-md fa-star"></i>
</a>
</span>
<span class="col-8 border border-danger">
Lorem ipsum dolor sit amet,consectetur adipisicing elit.
</span>
<span class="col-2">
<a href="/" class="text-warning">
<i class="fa fa-md fa-star"></i>
</a>
</span>
</div>
</div>
</div>
</div>