css - Bootstrap 网格对齐不起作用

Question

我有一组三张“卡片”(但不使用 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/

Answer 1

让我们重做一遍。

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

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

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

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

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

3. 最好避免 margin/padding top/bottom 中的百分比值，这样更容易定义 .back 的位置稍后在 list 7 中。

   .flip-cards .info-card {
       margin: 20px 10px 0 10px;
       padding: 10px 0 10px 0;
   }
   

4. 如果要对齐.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>
   

5. 不要使用 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>
   

6. 删除 positon:absolute在 .front .

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

7. 添加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%;
  }
}