當我調整屏幕大小時，如何停止堆疊列？

我試圖創建兩列閃存卡相鄰的外觀，並且我可以在瀏覽器佔用全屏幕（或大部分屏幕）的情況下在筆記本電腦上創建此外觀，但是一旦我啓動使瀏覽器的寬度更小，我的閃存卡堆疊在一起。我已經嘗試爲每列創建兩個類並將它們浮動，我甚至嘗試過使用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- *來解決這個問題，謝謝！ –

當我調整屏幕大小時，如何停止堆疊列？

回答

相關問題