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

我试图创建两列闪存卡相邻的外观，并且我可以在浏览器占用全屏幕（或大部分屏幕）的情况下在笔记本电脑上创建此外观，但是一旦我启动使浏览器的宽度更小，我的闪存卡堆叠在一起。我已经尝试为每列创建两个类并将它们浮动，我甚至尝试过使用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); 
}

的自举样式低于

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

来源

2016-12-22 Robert Garza

设置'最小宽度' – pol

使用'col-xs- *'类的帮助。他们从不堆叠。 –

[Bootstrap 3 - 使用固定包装的网格 - 防止堆叠的网格]可能的重复（http://stackoverflow.com/questions/18715955/bootstrap-3-grid-with-fixed-wrapper-prevent-columns-from-堆叠） –

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

来源

2016-12-23 00:48:57

这是有帮助的。之前我曾经读过它，但是作为新手，其中一些已经过了我的头，我还认为我已经在关于使用col-xs- *的部分上进行了细化。不过，我可以使用col-xs- *来解决这个问题，谢谢！ –

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

回答

相关问题