Question

我正在尝试创建彼此相邻的两列闪存卡的外观，我可以在我的笔记本电脑上创建此外观，浏览器占用全屏（或大部分屏幕）但是一旦我开始使浏览器的宽度变小，我的闪存卡堆叠在一起。我已经尝试为每个列创建两个类并浮动它们，我甚至尝试使用bootstrap的网格系统而没有运气。这是我最近的尝试：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">

  <label>
  <input type="checkbox"  />
  <div class="card">
      <div class="front">
        <table>
          <tr>
            <td>
              <img src="https://www.tampabay.com/resources/images/dti/rendered/2013/08/pt_278041_CODD_sextuplets_1_11398051_8col.jpg" alt="no">
            </td>
          </tr>
          <tr id="bottom">
            <td>Failure of family planning</td>
          </tr>
        </table>
    </div>
    <div class="back">
      <table>
        <tr>
          <td> Z37.54: Sextuplets, all liveborn </td>
        </tr>
      </table>
    </div>
  </div>
  </label>
</div>
  <div class="col-sm-6">

  <label>
  <input type="checkbox"  />
  <div class="card">
      <div class="front">
        <table>
          <tr>
            <td>
              <img src="http://static.igre123.com/slike/28899-68381/turtle-attack!!!-*-*.jpg" alt="no">
            </td>
          </tr>
          <tr id="bottom">
            <td>Teenage Mutant Ninja Turtles attack Bebop and Rocksteady</td>
          </tr>
        </table>
    </div>
    <div class="back">
      <table>
        <tr>
          <td> W59.21XA:Bitten by turtle, initial encounter </td>
        </tr>
      </table>
    </div>
  </div>
  </label>
</div>

这是我的CSS：

header{
text-align: center;
font-size: 30px;
margin-bottom: 5%
}

label {
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
display: block;
width: 300px;
height: 200px;
position: static;
left: 50%;
top: 50%;
cursor: pointer;
}

img {height: 150px;
}

.card {
position: relative;
height: 100%;
width: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 600ms;
transition: all 600ms;
z-index: 20;
}

.card div {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #FFF;
    text-align: center;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 2px;
}
.card div > table {
background: #fff;
width: 100%;
height: 100%;
}

.card .back {
    color: #222;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    }



label:hover .card {
-webkit-transform: rotateX(20deg);
transform: rotateX(20deg);
box-shadow: 0 20px 20px rgba(50,50,50,.2);
}

input {
display: none;
}

:checked + .card {
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}

label:hover :checked + .card {
transform: rotateX(160deg);
-webkit-transform: rotateX(160deg);
box-shadow: 0 20px 20px rgba(255,255,255,.2);
}

boostrap样式表位于

之下

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Answer 1

请访问BootStrap official responsive guide 它可以帮助您解决问题。您也可以从Bootstarp Expo Theme

获取帮助

在调整屏幕大小时，如何停止堆叠列？

1 个答案: