如何解决如何将第二列中的文本居中到页面 - bootstrap
我有一个包含两列的标题。第一列是徽标，第二列是居中的标题。下面是带有居中标题的主要内容。我试图得到它，以便标题中的标题像主要内容中的标题一样以主父容器为中心。 我使用的是引导程序 4.6。
这是我正在谈论的内容的绘图：
html,body {
height: 100%;
}
.container-fluid {
height: 100%;
min-height: 100%;
}
.row-color {
background-color: #DCE6F2;
}
.logo-width img{
width: 220px;
height: 210px;
}
.column-width img {
width: 120px;
height: 115px;
}
#page-container {
height: 100%;
display: flex;
flex-direction: column;
}
footer {
background-color: #024393;
color: #fff;
}<!doctype html>
<html lang="en">
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Title</title>
</head>
<body>
<div id="page-container" class="container-fluid">
<div class="row row-color align-items-center text-center p-5">
<div class="col-2 logo-width text-center">
<img src="img/shelter_logo.svg" alt="logo Here">
</div>
<div class="col">
<div class="center">
<h2>heading</h2>
<p>text</p>
<h2>heading</h2>
<p>Text</p>
</div>
</div>
</div><!-- end row -->
<div class="row my-5">
<div class="col text-center">
<h2>heading</h2>
</div>
</div>
<div class="row justify-content-around">
<div class="col text-center">
<img src="#" alt="">
<h3>heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>heading</h3>
</div>
</div>
<footer class="d-flex justify-content-center mt-auto">
<div class="row justify-content-around p-3">
<div class="col text-center">
<h3>heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
</div>
<div class="col text-center">
<h3>heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
</div>
<div class="col text-center">
<h3>heading</h3>
</div>
<div class="col text-center">
<img src="#g" alt="">
</div>
<div class="col text-center">
<h3>heading</h3>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>这是一个代码笔：https://codepen.io/west4me/pen/vYywWVX
解决方法
.col 将拉伸以填充该行。在您的情况下，您的标题行中有一个 .col-2，因此 .col 等于 .col-10。
如果你想让它居中，你需要在 12 列引导网格的中间，这意味着每边 2 列。
正如 Rick 所说，您需要将 .col 替换为 .col-8
html,body {
height: 100%;
}
.container-fluid {
height: 100%;
min-height: 100%;
}
.row-color {
background-color: #DCE6F2;
}
.logo-width img{
width: 220px;
height: 210px;
}
.column-width img {
width: 120px;
height: 115px;
}
#page-container {
height: 100%;
display: flex;
flex-direction: column;
}
footer {
background-color: #024393;
color: #fff;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Title</title>
</head>
<body>
<div id="page-container" class="container-fluid">
<div class="row row-color align-items-center text-center p-5">
<div class="col-2 logo-width text-center">
<img src="img/shelter_logo.svg" alt="Logo Here">
</div>
<div class="col-8">
<div class="center">
<h2>Heading</h2>
<p>text</p>
<h2>Heading</h2>
<p>Text</p>
</div>
</div>
</div><!-- end row -->
<div class="row my-5">
<div class="col text-center">
<h2>Heading</h2>
</div>
</div>
<div class="row justify-content-around">
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
</div>
<footer class="d-flex justify-content-center mt-auto">
<div class="row justify-content-around p-3">
<div class="col text-center">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
</div>
<div class="col text-center">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
</div>
<div class="col text-center">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#g" alt="">
</div>
<div class="col text-center">
<h3>Heading</h3>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。