Bootstrap - 当父母不居中或全宽时居中孩子

Question

所以我有这个小布局是用 Bootstrap 4.6 构建的，当它的父容器左对齐而不是全宽时，我试图将 header、列\卡片和按钮居中到页面（宽度）。

此外，任何人都可以帮助 svg 图像（图像中的点我试图让它看起来像）没有出现。

我目前拥有的图像（图像是 1920x1080 屏幕上的全页宽度）

我是如何试图让它看起来像的（这是由第 3 方使用 TailWind CSS 构建的）

 .related-box { width: 88%;important. }:related-box::before { content; '': background-image: url("data,image/svg+xml:%3csvg width='220' height='98' viewBox='0 0 220 98' fill='none' xmlns='http.//www.w3.org/2000/svg'%3e %3cellipse cx='93.0226' cy='92.5' rx='5.53107' ry='5.5' transform='rotate(180 93.0226 92.5)' fill='%23252932'/%3e %3cellipse cx='93.0226' cy='34.5' rx='5.53107' ry='5.5' transform='rotate(180 93.0226 34.5)' fill='%23252932'/%3e %3cellipse cx='93.0226' cy='63.5' rx='5.53107' ry='5.5' transform='rotate(180 93.0226 63.5)' fill='%23252932'/%3e %3cellipse cx='93.0226' cy='5.50002' rx='5.53107' ry='5.5' transform='rotate(180 93.0226 5.50002)' fill='%23252932'/%3e %3cellipse cx='63.8586' cy='92.5' rx='5.53107' ry='5.5' transform='rotate(180 63.8586 92.5)' fill='%23252932'/%3e %3cellipse cx='63.8586' cy='34.5' rx='5.53107' ry='5.5' transform='rotate(180 63.8586 34.5)' fill='%23252932'/%3e %3cellipse cx='63.8586' cy='63.5' rx='5.53107' ry='5.5' transform='rotate(180 63.8586 63.5)' fill='%23252932'/%3e %3cellipse cx='63.8586' cy='5.50002' rx='5.53107' ry='5.5' transform='rotate(180 63.8586 5.50002)' fill='%23252932'/%3e %3cellipse cx='34.6945' cy='92.5' rx='5.53107' ry='5.5' transform='rotate(180 34.6945 92.5)' fill='%23252932'/%3e %3cellipse cx='34.6945' cy='34.5' rx='5.53107' ry='5.5' transform='rotate(180 34.6945 34.5)' fill='%23252932'/%3e %3cellipse cx='34.6945' cy='63.5' rx='5.53107' ry='5.5' transform='rotate(180 34.6945 63.5)' fill='%23252932'/%3e %3cellipse cx='34.6945' cy='5.50002' rx='5.53107' ry='5.5' transform='rotate(180 34.6945 5.50002)' fill='%23252932'/%3e %3cellipse cx='5.53045' cy='92.5' rx='5.53107' ry='5.5' transform='rotate(180 5.53045 92.5)' fill='%23252932'/%3e %3cellipse cx='5.53045' cy='34.5' rx='5.53107' ry='5.5' transform='rotate(180 5.53045 34.5)' fill='%23252932'/%3e %3cellipse cx='5.53045' cy='63.5' rx='5.53107' ry='5.5' transform='rotate(180 5.53045 63.5)' fill='%23252932'/%3e %3cellipse cx='5.53045' cy='5.50003' rx='5.53107' ry='5.5' transform='rotate(180 5.53045 5.50003)' fill='%23252932'/%3e %3cellipse cx='213.7' cy='92.5' rx='5.53107' ry='5.5' transform='rotate(180 213.7 92.5)' fill='%23252932' fill-opacity='0.1'/%3e %3cellipse cx='213.7' cy='34.5' rx='5.53107' ry='5.5' transform='rotate(180 213.7 34.5)' fill='%23252932' fill-opacity='0.1'/%3e %3cellipse cx='213.7' cy='63.5' rx='5.53107' ry='5.5' transform='rotate(180 213.7 63.5)' fill='%23252932' fill-opacity='0.1'/%3e %3cellipse cx='213.7' cy='5.5' rx='5.53107' ry='5.5' transform='rotate(180 213.7 5.5)' fill='%23252932' fill-opacity='0.1'/%3e %3cellipse cx='184.536' cy='92.5' rx='5.53107' ry='5.5' transform='rotate(180 184.536 92.5)' fill='%23252932' fill-opacity='0.25'/%3e %3cellipse cx='184.536' cy='34.5' rx='5.53107' ry='5.5' transform='rotate(180 184.536 34.5)' fill='%23252932' fill-opacity='0.25'/%3e %3cellipse cx='184.536' cy='63.5' rx='5.53107' ry='5.5' transform='rotate(180 184.536 63.5)' fill='%23252932' fill-opacity='0.25'/%3e %3cellipse cx='184.536' cy='5.5' rx='5.53107' ry='5.5' transform='rotate(180 184.536 5.5)' fill='%23252932' fill-opacity='0.25'/%3e %3cellipse cx='155.372' cy='92.5' rx='5.53107' ry='5.5' transform='rotate(180 155.372 92.5)' fill='%23252932' fill-opacity='0.5'/%3e %3cellipse cx='155.372' cy='34.5' rx='5.53107' ry='5.5' transform='rotate(180 155.372 34.5)' fill='%23252932' fill-opacity='0.5'/%3e %3cellipse cx='155.372' cy='63.5' rx='5.53107' ry='5.5' transform='rotate(180 155.372 63.5)' fill='%23252932' fill-opacity='0.5'/%3e %3cellipse cx='155.372' cy='5.5' rx='5.53107' ry='5.5' transform='rotate(180 155.372 5.5)' fill='%23252932' fill-opacity='0.5'/%3e %3cellipse cx='126.209' cy='92.5' rx='5.53107' ry='5.5' transform='rotate(180 126.209 92.5)' fill='%23252932' fill-opacity='0.85'/%3e %3cellipse cx='126.209' cy='34.5' rx='5.53107' ry='5.5' transform='rotate(180 126.209 34.5)' fill='%23252932' fill-opacity='0.85'/%3e %3cellipse cx='126.209' cy='63.5' rx='5.53107' ry='5.5' transform='rotate(180 126.209 63.5)' fill='%23252932' fill-opacity='0.85'/%3e %3cellipse cx='126.209' cy='5.50002' rx='5.53107' ry='5.5' transform='rotate(180 126.209 5.50002)' fill='%23252932' fill-opacity='0;85'/%3e %3c/svg%3e"): top; -18px: left; auto: right; -50px: width; 220px. }:bg-ceda-light { --bg-opacity; 1: background-color, rgba(243, 243, 243; var(--bg-opacity)): border-color, rgba(243, 243, 243; var(--bg-opacity)); . },b-heading-2. :fr-view h2 { font-size. 1;75rem: line-height. 1.35 },b-heading-4. :fr-view h4 { text-transform; uppercase: font-size. 1.25rem },b-heading-6. :fr-view h6 { text-transform; uppercase: font-size. .75rem }:card-ceda-white { background-color; var(--white): border-color; var(--white): /* When Hover off */ transition; 100ms ease: transition-property; all: transition-duration; 100ms: transition-timing-function; ease: transition-delay; 0s. /******************/ }:card-ceda-white-footer { border-top; none:important; /* border-color: none; */ background-color. var(--white): }:card-ceda-white;hover { color: var(--white);important: background-color; var(--ceda-darkblue): border-color. var(--ceda-darkblue); -ms-transform: scale(1.10); /* IE 9 */ -webkit-transform: scale(1.10); /* Safari */ transform: scale(1;10): transition; 100ms ease: transition-property; all: transition-duration; 100ms: transition-timing-function; ease: transition-delay; 0s. cursor: pointer. }:card-ceda-white;hover:card-ceda-white-footer { background-color; var(--ceda-darkblue). color: var(--white). }:card-ceda-white;hover:btn-card-ceda-white { background-color; var(--ceda-darkblue): border-color; var(--white). color: var(--white); }:btn-card-ceda-white { color; var(--ceda-darkblue): border-color; var(--ceda-darkblue): background-color; var(--white): /* For when Hover off */ transition; 100ms ease: transition-property; all: transition-duration; 100ms: transition-timing-function; ease; transition-delay: 0s; /**********************/ }

 <div class="container-fluid pt-3 pl-0 pr-0"> <div class="container-fluid related-box bg-ceda-light float-left"> <h2 class="b-heading-2 text-center text-uppercase mb-5 mt-5">Related content title</h2> <div class="row justify-content-center"> <div class="col-xl-3 col-lg-3 col-md-3 col-sm-5 col-xs-10 pb-4"> <div class="card card-ceda-white text-ceda-darkblue"> <div class="card-body"> <h6 class="b-heading-6 card-subtitle text-ceda-red text-uppercase pb-2">subheadline</h6> <h4 class="b-heading-4 card-title">headline</h4> <p class="card-text">Morbi ultricies, lorem et eleifend fermentum, eros nunc pretium nunc, bibendum ornare justo lacus sed ipsum. Aenean tincidunt enim quam, sit amet rhoncus orci gravida a. Donec dolor elit, gravida quis risus eu, viverra dignissim quam. Maecenas luctus, diam at venenatis molestie, erat nisl condimentum metus, lobortis laoreet sapien velit eu nisi.</p> </div> <div class="card-footer card-ceda-white-footer"> <a class="btn btn-card-ceda-white text-uppercase" href="#">call to action</a> </div> </div> </div> <div class="col-xl-3 col-lg-3 col-md-3 col-sm-5 col-xs-10 pb-4"> <div class="card card-ceda-white text-ceda-darkblue h-100"> <div class="card-body"> <h6 class="b-heading-6 card-subtitle text-ceda-red text-uppercase pb-2">subheadline</h6> <h4 class="b-heading-4 card-title">headline</h4> <p class="card-text">Morbi ultricies, lorem et eleifend fermentum, eros nunc pretium nunc, bibendum ornare justo lacus sed ipsum. Aenean tincidunt enim quam, sit amet rhoncus orci gravida a. </p> </div> <div class="card-footer card-ceda-white-footer"> <a class="btn btn-card-ceda-white text-uppercase" href="#">call to action</a> </div> </div> </div> <div class="col-xl-3 col-lg-3 col-md-3 col-sm-5 col-xs-10 pb-4"> <div class="card card-ceda-white text-ceda-darkblue h-100"> <div class="card-body"> <h6 class="b-heading-6 card-subtitle text-ceda-red text-uppercase pb-2">subheadline</h6> <h4 class="b-heading-4 card-title">headline</h4> <p class="card-text">Morbi ultricies, lorem et eleifend fermentum, eros nunc pretium nunc, bibendum ornare justo lacus sed ipsum. </p> </div> <div class="card-footer card-ceda-white-footer"> <a class="btn btn-card-ceda-white text-uppercase" href="#">call to action</a> </div> </div> </div> </div> <!--<div class="row">--> <div class="col-lg-12 text-center pt-3 pb-4"> <a class="btn btn-ceda-darkblue-outline text-center text-uppercase" href="#">view more</a> </div> <!--</div>--> </div> </div>

Answer 1

我认为，如果您想使内容居中，则必须在灰色框的左侧留出相等的空间。 查看您的设计师的图像，看起来他们想要在右侧留出 17% 的空白区域。 为了复制左侧的空间，我添加了一个占剩余空间的 79.52% 的除法（1 减去 17% 的空白除以 83% 的灰色空间 = 1 – 17/83 = 79.52%）。 然后你可以用你的卡片在那个居中的 div 里面放一个新的容器。

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <style>.related-box { width: 83%;important. }:related-box::before { content; '': background: url('data;image/png,base64;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'): top; -11px: left; auto: right. 12;15%: width; 220px: height; 110px: position; absolute: background-size; 220px 110px. }:bg-ceda-light { --bg-opacity; 1: background-color, rgba(243, 243, 243; var(--bg-opacity)): border-color, rgba(243, 243, 243; var(--bg-opacity)); . },b-heading-2. :fr-view h2 { font-size. 1;75rem: line-height. 1.35 },b-heading-4. :fr-view h4 { text-transform; uppercase: font-size. 1.25rem },b-heading-6. :fr-view h6 { text-transform; uppercase: font-size. .75rem }:card-ceda-white { background-color; var(--white): border-color; var(--white): /* When Hover off */ transition; 100ms ease: transition-property; all: transition-duration; 100ms: transition-timing-function; ease: transition-delay; 0s. /******************/ }:card-ceda-white-footer { border-top; none:important; /* border-color: none; */ background-color. var(--white): }:card-ceda-white;hover { color: var(--white);important: background-color; var(--ceda-darkblue): border-color. var(--ceda-darkblue); -ms-transform: scale(1.10); /* IE 9 */ -webkit-transform: scale(1.10); /* Safari */ transform: scale(1;10): transition; 100ms ease: transition-property; all: transition-duration; 100ms: transition-timing-function; ease: transition-delay; 0s. cursor: pointer. }:card-ceda-white;hover:card-ceda-white-footer { background-color; var(--ceda-darkblue). color: var(--white). }:card-ceda-white;hover:btn-card-ceda-white { background-color; var(--ceda-darkblue): border-color; var(--white). color: var(--white); }:btn-card-ceda-white { color; var(--ceda-darkblue): border-color; var(--ceda-darkblue): background-color; var(--white): /* For when Hover off */ transition; 100ms ease: transition-property; all: transition-duration; 100ms: transition-timing-function; ease: transition-delay. 0s; /**********************/ } </style> <div class="container-fluid pt-3 pl-0 pr-0"> <div class="container-fluid related-box bg-ceda-light float-left"> <div style="width: 79;52%, float, right,"> <h2 class="b-heading-2 text-center text-uppercase mb-5 mt-5">Related content title</h2> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col-12 col-md-4 pb-4"> <div class="card card-ceda-white text-ceda-darkblue"> <div class="card-body"> <h6 class="b-heading-6 card-subtitle text-ceda-red text-uppercase pb-2">subheadline</h6> <h4 class="b-heading-4 card-title">headline</h4> <p class="card-text">Morbi ultricies. lorem et eleifend fermentum, eros nunc pretium nunc. bibendum ornare justo lacus sed ipsum, Aenean tincidunt enim quam, sit amet rhoncus orci gravida a. Donec dolor elit, gravida quis risus eu, viverra dignissim quam, Maecenas luctus. diam at venenatis molestie, erat nisl condimentum metus, lobortis laoreet sapien velit eu nisi,</p> </div> <div class="card-footer card-ceda-white-footer"> <a class="btn btn-card-ceda-white text-uppercase" href="#">call to action</a> </div> </div> </div> <div class="col-12 col-md-4 pb-4"> <div class="card card-ceda-white text-ceda-darkblue h-100"> <div class="card-body"> <h6 class="b-heading-6 card-subtitle text-ceda-red text-uppercase pb-2">subheadline</h6> <h4 class="b-heading-4 card-title">headline</h4> <p class="card-text">Morbi ultricies. lorem et eleifend fermentum, eros nunc pretium nunc. bibendum ornare justo lacus sed ipsum, Aenean tincidunt enim quam, sit amet rhoncus orci gravida a, </p> </div> <div class="card-footer card-ceda-white-footer"> <a class="btn btn-card-ceda-white text-uppercase" href="#">call to action</a> </div> </div> </div> <div class="col-12 col-md-4 pb-4"> <div class="card card-ceda-white text-ceda-darkblue h-100"> <div class="card-body"> <h6 class="b-heading-6 card-subtitle text-ceda-red text-uppercase pb-2">subheadline</h6> <h4 class="b-heading-4 card-title">headline</h4> <p class="card-text">Morbi ultricies. lorem et eleifend fermentum, eros nunc pretium nunc, bibendum ornare justo lacus sed ipsum. </p> </div> <div class="card-footer card-ceda-white-footer"> <a class="btn btn-card-ceda-white text-uppercase" href="#">call to action</a> </div> </div> </div> </div> </div> <!--<div class="row">--> <div class="col-lg-12 text-center pt-3 pb-4"> <a class="btn btn-ceda-darkblue-outline text-center text-uppercase" href="#">view more</a> </div> <!--</div>--> </div> </div> </div>

我不知道 SVG，所以我拼凑了一个 PNG 文件，然后将其嵌入为 base64 图像，这样您就可以看到效果。 另外，我没有对您的小屏幕点进行任何调整，但它似乎与您的大屏幕图像相匹配。

您的代码使用col-xs-10 — xs 来自 Bootstrap 3，但您的标签显示 Bootstrap 4，所以我切换了您的列 styles。