问题描述
我正在尝试将容器居中,并且正在使用Twitter Bootstrap 4
这是html
<div class="container">
<div class="features">
<h3 class="text-center mb-5">So many ways to connect with all your friends</h1>
<div class="row">
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="49824.PHP" alt="A simple MacBook Air with a glass of water next to it">
<div class="card-body">
<h5 class="card-title">Mac users are lucky!</h5>
<p class="card-text">Our application designed for Mac users allows them to have a more stable version of our interface as well as a more pleasant design and unbeatable speed.<br>
More secure,easier,and more efficient.</p>
<div class="text-center mt-4">
<a href="#" class="btn btn-primary">Download</a>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="1114478.PHP" alt="A brown-haired woman smiling while being on the phone">
<div class="card-body">
<h5 class="card-title">broadcom Wi-Fi</h5>
<p class="card-text">With our technology 'broadcom Wi-Fi',calling your friends has never been so easy before!<br>You can call them outside of your house,even when there's no Wi-Fi around you.<br><br></p>
<div class="text-center mt-4">
<a href="#" class="btn btn-primary">Try</a>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="59843.PHP" alt="A group of friends discussing in a classroom">
<div class="card-body">
<h5 class="card-title">Keep contact with your friends.</h5>
<p class="card-text">A good reason for using Messenger is that you can stay in contact with anyone you meet in life.<br>Add your friends by adding their unique IDs.</p>
<div class="text-center mt-4">
<a href="#" class="btn btn-primary">Get an ID</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
这里是CSS的预览(我将发布我的所有样式表,因为我不知道这是如何工作的):
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
h1,h2,h3,h4,h5,h6 {
font-weight:700 !important;
}
p {
font-weight:300;
}
body {
background:#fff !important;
font-family:'Roboto',sans-serif !important;
}
select {
padding:0 30px 0 10px !important;
-webkit-padding-end: 30px !important;
-webkit-padding-start: 10px !important;
}
span.navbar-text {
font-size:9pt;
color:rgba(0,.55);
font-weight:400;
}
p.desc {
color:rgba(0,.55);
}
.dropdown-menu {
background:#fff !important;
border-radius:0 !important;
font-weight:300 !important;
color:rgba(0,.55) !important;
max-width:50%;
position:absolute;
}
a.dropdown-item {
font-weight:300 !important;
color:rgba(0,.55) !important;
}
.navbar {
border-bottom:1px solid rgba(0,0.04);
background:#fff;
}
.jumbotron {
background:rgba(255,255,0);
color:#000;
margin:0 auto;
border-radius:0;
}
.px-11 {
font-size:11pt;
}
.pd-20 {
padding-top:20px;
}
img.brand {
transition:transform 0.5s ease;
}
img.brand:hover {
transform: scale(1.06);
}
ul.navbar-nav {
margin-left:10px;
}
a {
letter-spacing:0.1px;
font-size:11pt;
font-weight:300;
color: rgba(0,.55);
}
li.active > a {
font-weight:500;
}
li {
padding-right:10px;
}
a:hover {
color:#000;
text-decoration:underline;
}
.brand-text {
font-size:11pt;
font-weight:300;
color:#000;
position:relative;
}
h1 {
color:#000;
}
.form-control {
border-radius:6px;
background:#fff;
color:rgba(0,.55);
font-size:10pt;
font-weight:300;
border:1px solid rgba(0,0.04);
width:50%;
letter-spacing:-0.1px;
padding:20px 15px;
}
.form-control:focus {
border:1px solid rgba(0,0.08);
Box-shadow:none;
}
nav ul li a,nav ul li a:after,nav ul li a:before {
transition: all 0.2s ease;
}
label {
font-weight:300;
font-size:11pt;
}
.btn {
background:#0078FF;
color:#fff;
font-size:10pt;
border-radius:3px;
font-weight:500;
}
.btn:hover {
color:#fff;
}
.smart-scroll{
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.scrolled-down{
transform:translateY(-100%); transition: all 0.3s ease-in-out;
}
.scrolled-up{
transform:translateY(0); transition: all 0.3s ease-in-out;
}
.card-title {
font-size:16pt !important;
font-weight:700 !important;
}
.card-text {
font-size:9pt;
font-weight:400;
color:rgba(0,.55);
}
.card {
border-radius:10px;
border:0;
Box-shadow:0px 0px 20px rgba(0,.07) !important;
}
.features {
margin-top:75px !important;
margin-bottom:50px;
}
以下是我的问题的预览:
解决方法
从div删除宽度具有班级卡片
<div class="card" style="width: 18rem;">
收件人:
<div class="card">
为您的col div或卡片div使用填充和边距=> https://getbootstrap.com/docs/4.1/utilities/spacing/
,在这种情况下,只需使用
<center>
your code you want to center
</center>
95%的时间正常工作