我无法在 bootstrap 中水平对齐我的列。我想要的是图像在左边，文本在右边，但它保持垂直堆叠。我可以得到一些帮助吗？
据我了解，col-md-6 会将页面拆分为 2 列，而 col-xs-12 会将它们垂直堆叠在移动设备上，但它不会似乎是为我做的。我正在做的事情是否覆盖了默认的 Bootstrap css？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
crossorigin="anonymous">
<style media="screen" type="text/css">
img {
width: 100%;
}
.btn {
margin: auto;
}
.vertical-center {
height:100%;
width:100%;
}
.left-text {
text-align: left;
}
</style>
</head>
<body class="verticalcenter">
<div class="container vertical-center">
<div class="col-xs-12 col-sm-12 col-lg-6">
<img src="./profile.jpg">
</div>
<div class="col-xs-12 col-sm-12 col-lg-5">
<div class="row left-text">
<div class="col-xs-12 col-md-8">
<h2>MyStackFlowethOver</h2>
</div>
<div class="col-xs-12 col-md-8">
<h4>web developer</h4>
</div>
<div class="col-xs-12 col-md-8">
<a href="#" class="" role="button" target="_blank">github</a>
</div>
<div class="col-xs-12 col-md-8">
<a href="#" class="" role="button" target="_blank">linkedin</a>
</div>
<div class="col-xs-12 col-md-8">
<a href="3" class="" role="button" target="_blank">twitter</a>
</div>
<div class="col-xs-12 col-md-8">
<a href="/blog" class="" role="button" target="_blank">blog</a>
</div>
<div class="col-xs-12 col-md-8">
<a href="./resume.pdf" class="" role="button" target="_blank">resume</a>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
首先，你需要<div class = "row">对于要插入的每一行内容。这可能会打乱您的布局。
您的代码示例:
<div class = "row">
<div class="col-xs-12 col-sm-12 col-lg-6">
<img src="./profile.jpg">
</div>
</div>
等等。
关于html - 列不会与 Bootstrap 水平对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51386386/