Question

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

  <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代码，以方便您使用。

在引导程序中添加<div class="row">下面的网格。

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

不要在同一级别添加任何包含网格类的填充和边距的类。

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

最好避免边距/填充顶部/底部的百分比值，并且您更容易在列表7中稍后定义.back的位置。
```
.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 < / p>

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

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

请勿在{{1}}中使用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
```

我的Html代码

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

我的Css代码

<!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>

Bootstrap网格对齐无效

1 个答案: