css - Bootstrap 网格对齐不起作用

我有一组三张“卡片”(但不使用 Bootstrap 卡片类)，我需要将它们水平对齐并居中放置在页面上。我将外部 div 设置为全宽，并尝试让三个 .info-card 类中的每一个都等于 .col-lg-4 宽度。这仍然保持卡片向左浮动(从 .flip-card 类中删除左侧 float 会使卡片垂直对齐。如何在此处正确应用列？

  <div class="container">
  <div class="flip-cards col-lg-12">
    <div class="info-card col-lg-4">
      <div class="front">
          <h3>Header</h3>
      </div>
      <div class="back">
        <p>Title</p>
        <h6>lorem ipsum</h6>
      </div>
    </div>
    <div class="info-card col-lg-4">
      <div class="front">
          <h3>Header</h3>
      </div>
      <div class="back">
        <p>Title</p>
        <h6>lorem ipsum</h6>
      </div>
    </div>
    <div class="info-card col-lg-4">
      <div class="front">
          <h3>Header</h3>
      </div>
      <div class="back">
        <p>Title</p>
        <h6>lorem ipsum</h6>
      </div>
    </div>
  </div>
</div>

CSS

.container{
  background-color: #eee;
}
.flip-cards .info-card {
  float: left;
  margin: 2% 1% 0% 1%;
  padding: 5% 0% 5% 0%;
  position: relative;
  -webkit-perspective: 600px;
}
.flip-cards .info-card:hover .back {
  -webkit-transform: rotateY(0);
}
.flip-cards .info-card:hover .front {
  -webkit-transform: rotateY(180deg);
}
.flip-cards .info-card .front, .flip-cards .info-card .back {
  transition: -webkit-transform 1s;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}
.flip-cards .info-card .front {
  background-color: #fff;
  overflow: hidden;
  width: 200px;
  height: 170px;
  position: absolute;
  opacity: .5;
}
.flip-cards .info-card .front h3 {
  text-decoration: underline;
  padding: 10px;
  text-align: left;
  color: #6633cc;
}
.flip-cards .info-card .back {
  background-color: #6633cc;
  width: 200px;
  height: 170px;
  -webkit-transform: rotateY(-180deg);
}
.flip-cards .info-card .back p {
  color: #fff;
  padding: 7px 0px 0px 10px;
  font-size: 10px;
}
.flip-cards .info-card .back h6 {
  font-weight: 400;
  color: #fff;
  position: absolute;
  text-align: left;
  padding: 0px 10px 10px 10px;
  bottom: 0;
}
.flip-cards .info-card .back h6 a {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 400) {
  .flip-cards {
    margin-left: -3%;
  }

  .card-outer-wrapper {
    height: 260px;
    margin-bottom: 40px;
    max-width: 100vw;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
  }

  .card-outer-wrapper .card-wrapper {
    overflow-x: scroll;
    width: 200%;
  }
}

JSFIDDLE:https://jsfiddle.net/sxLodk6r/

最佳答案

让我们重做一遍。

这次我会列出所有需要修复的代码，最后我会粘贴所有最终的 html 和 css 代码以方便您使用。

在下方添加网格<div class="row">在 Bootstrap 中。

<div class="container">
    <div class="row"> <!-- Add This -->
        <div class="flip-cards col-lg-12 ">
        ...
        </div>
    </div> <!-- Add This -->
</div>

不要在同一级别添加任何包含 padding 和 margin 的类。

 <div class="col-lg-4">
     <div class="info-card "> <!-- Separate this class -->
         ...
     </div>
 </div>

最好避免 margin/padding top/bottom 中的百分比值，这样更容易定义 .back 的位置稍后在 list 7 中。
```
.flip-cards .info-card {
    margin: 20px 10px 0 10px;
    padding: 10px 0 10px 0;
}
```

如果要对齐.info-card居中，替换 float:left与 display:inline-block在 .info-card并添加 .text-center与 .col-lg-4

.flip-cards .info-card {
    display: inline-block;
    float: left;  /* Remove This! */
}

<div class="col-lg-4 text-center">
    <div class="info-card ">
    ...
    </div>
</div>

不要使用 overflow:hidden在 .front ，而是删除 margin-top在 h3 .

.flip-cards .info-card .front { {
    overflow: hidden;   /* Remove This */
}

.flip-cards .info-card .front h3 {
    margin-top: 0px;
}
</div>

删除 positon:absolute在 .front .

.flip-cards .info-card .front {
    position: absolute;  /* Remove This! */
}

添加position:absolute和 top:10px在 .back .

.flip-cards .info-card .back {
    background-color: #6633cc;
    width: 200px;
    height: 170px;
    position: absolute;
    top:10px;
    -webkit-transform: rotateY(-180deg);
}

我的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="flip-cards col-lg-12 ">
                <div class="col-lg-4 text-center">
                    <div class="info-card ">
                        <div class="front">
                          <h3>Header</h3>
                        </div>
                        <div class="back">
                            <p>Title</p>
                            <h6>lorem ipsum</h6>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 text-center">
                    <div class="info-card ">
                        <div class="front">
                          <h3>Header</h3>
                        </div>
                        <div class="back">
                            <p>Title</p>
                            <h6>lorem ipsum</h6>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 text-center">
                    <div class="info-card ">
                        <div class="front">
                          <h3>Header</h3>
                        </div>
                        <div class="back">
                            <p>Title</p>
                            <h6>lorem ipsum</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

我的CSS代码

.container{
  background-color: #eee;
}
.flip-cards .info-card {
  display: inline-block;
  margin: 20px 10px 0 10px;
  padding: 10px 0 10px 0;
  position: relative;
  -webkit-perspective: 600px; 
}
.flip-cards .info-card:hover .back {
  -webkit-transform: rotateY(0);
}
.flip-cards .info-card:hover .front {
  -webkit-transform: rotateY(180deg);
}
.flip-cards .info-card .front, .flip-cards .info-card .back {
  transition: -webkit-transform 1s;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}
.flip-cards .info-card .front {
  background-color: #fff;
  width: 200px;
  height: 170px;
  opacity: .5;
}
.flip-cards .info-card .front h3 {
  text-decoration: underline;
  padding: 10px;
  text-align: left;
  color: #6633cc;
  margin-top: 0px;
}
.flip-cards .info-card .back {
  background-color: #6633cc;
  width: 200px;
  height: 170px;
  position: absolute;
  top:10px;
  -webkit-transform: rotateY(-180deg);
}
.flip-cards .info-card .back p {
  color: #fff;
  padding: 7px 0px 0px 10px;
  font-size: 10px;
}
.flip-cards .info-card .back h6 {
  font-weight: 400;
  color: #fff;
  position: absolute;
  text-align: left;
  padding: 0px 10px 10px 10px;
  bottom: 0;
}
.flip-cards .info-card .back h6 a {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 400) {
  .flip-cards {
    margin-left: -3%;
  }
  .card-outer-wrapper {
    height: 260px;
    margin-bottom: 40px;
    max-width: 100vw;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
  }
  .card-outer-wrapper .card-wrapper {
    overflow-x: scroll;
    width: 200%;
  }
}

关于css - Bootstrap 网格对齐不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37381313/

css - Bootstrap 网格对齐不起作用

上一篇：javascript - 滚动固定的 div 时防止正文滚动？

下一篇：javascript - 即使在 javascript 中有 onload 事件，如何阻止 Canvas Image 消失？