无法将容器居中

如何解决无法将容器居中

我正在尝试将容器居中,并且正在使用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;
}

以下是我的问题的预览:

preview

解决方法

从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%的时间正常工作

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?