好的，所以我已经经历并尝试了几种不同的解决方案，但我还没有找到一种可以按照我想要的方式工作，因此我寻求帮助。
这是我当前代码的示例：
<div class="row">
<div class="col-md-3">
<h3>
Operating Systems:
</h3>
</div>
<div class="col-md-8">
<ul>
<li>Windows</li>
<li>Linux</li>
</ul>
</div>
</div>
这给了我以下内容：截图
通过向列添加以下样式：
<style>
.col-height {
display: table-cell;
float: none;
height: 100%;
</style>
当每个列中的文本沿顶部对齐时，我让它显示我想要的内容。
问题在于，当调整为小尺寸时，它会像此处显示的那样显示它，因为我希望它像硬件部分一样显示。
所以这是我的问题：有没有办法使用引导程序让它在两种情况下都显示我想要的方式，还是我必须选择一个或另一个？
使用媒体查询仅在较大的宽度上应用居中样式。h3 的边距影响垂直对齐，因此您可能需要调整它。另外 IMO，flexbox 是一种更好的对齐方法......
@media (min-width:768px) {
.flex {
display:flex;
align-items:center;
}
h3 {
margin-top:5px;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句