Question

Codepen.io - full code

 <div class="card-container">
            <div class="card col-lg-4 col-sm-6 col-xs-12">
              <div class="side">Jimmy Eat World</div>
              <div class="side back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="Jimmy Eat World"></div>
            </div>

尽管我使用的是Bootstrap，但是我无法将这些卡水平分布，并且它们一直在缩小（最初为正方形）。怎么了？

Answer 1

在codepen中，您设置了150px的宽度。您需要将其删除以容纳完整宽度的容器。

所有列都必须包含在一行中。

我从样式中删除了宽度，并向卡片容器div添加了一个行类。看这里： https://codepen.io/anon/pen/MXVGVE

<div class="card-container row"> // Columns must be contained within a row class
  <div class="card col-lg-4 col-sm-6 col-xs-12">
    <div class="side">Jimmy Eat World</div>
    <div class="side back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="Jimmy Eat World"></div>
  </div>
  <div class="card col-lg-4 col-sm-6 col-xs-12">
    Card 2...
  </div>
  <div class="card col-lg-4 col-sm-6 col-xs-12">
    Card 3...
  </div>
</div>

Answer 2

如果不包装col-.. div，就无法设置row

将width: 100%;设置为width: 150px;而不是.card-container 并将row添加到card-container

.card-container {
    cursor: pointer;
    height: 150px;
    perspective: 600;
    position: relative;
    width: 100%;
  }
  .card {
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: all 1s ease-in-out;
    width: 100%;
  }
  .card:hover {
    transform: rotateY(180deg);
  }
  .card .side {
    backface-visibility: hidden;
    border-radius: 6px;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
  }
  .card .back {
    background: #eaeaed;
    color: #0087cc;
    line-height: 150px;
    text-align: center;
    transform: rotateY(180deg);
  }

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<section class="section-heroes container" >
        <div class="u-center-text u-margin-bottom-big">
            <h2 class="heading-secondary">
                Choose your hero membership
            </h2>
        </div>

        <div class="row card-container">
                <div class="card col-lg-4 col-sm-6 col-xs-12">
                  <div class="side">Jimmy Eat World</div>
                  <div class="side back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="Jimmy Eat World"></div>
                </div>

                <div class="card col-lg-4 col-sm-6 col-xs-12">
                        <div class="side">Jimmy Eat World</div>
                        <div class="side back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="Jimmy Eat World"></div>
                      </div>

                      <div class="card col-lg-4 col-sm-6 col-xs-12">
                            <div class="side">Jimmy Eat World</div>
                            <div class="side back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="Jimmy Eat World"></div>
                          </div>
              </div>

如何均匀分布这些卡片

2 个答案: