1. 首页
  2. 问答
  3. Bootstrap ratio

Bootstrap ratio

2017-07-06 39 views
1

我想构建一种卡片式布局。这些卡应具有标准tcg卡的纵横比。Bootstrap ratio

所以一个方面的服务，我发现，我要补充

padding-top: 39.68%;

在plunkr，我已经建立了这个。它在col-sm-3的初始状态下工作正常，但只要切换到col-xs-2，纵横比就完全不同。

如果你在plunkr中调整它，你会明白我的意思。

Plunkr

来源

2017-07-06 Doomenik

+0

你尝试使用媒体查询来改变填充值？ – Kai

+0

@ kai这应该用col-xs和col-sm来完成它也会交换css代码 – Doomenik

+0

最后我想念一些东西，填充应该保持高度和宽度之间的比例。举个简单的例子，高度应该是宽度的两倍。 – Doomenik

回答

1

你不应该直接应用填充到具有指定宽度的元素 - 宽度需要为auto，以使填充工作并表示tcg卡的宽高比。

tcg卡的大小是63 x 88毫米。要以百分比形式获得高度，请将高度除以宽度 - 88/63 = 139％。

由于您不想将其应用于卡片本身，因此将该填充应用于伪元素，并将控制其应用于卡片的高度。

/* Styles go here */ 
 
.card { 
 
    background-color: grey; 
 
    border: 3px solid; 
 
} 
 
.card:before { 
 
    content: ''; 
 
    width: 1px; 
 
    padding-bottom: 139.68253968%; 
 
    display: block; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link data-require="[email protected]*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    </head> 
 

 
    <body> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-sm-2 card col-xs-3"> 
 
      1 
 
     </div> 
 
     <div class="col-sm-2 card col-xs-3"> 
 
      2 
 
     </div> 
 
     <div class="col-sm-2 card col-xs-3"> 
 
      1 
 
     </div> 
 
     <div class="col-sm-2 card col-xs-3"> 
 
      2 
 
     </div> 
 
     <div class="col-sm-2 card col-xs-3"> 
 
      1 
 
     </div> 
 
     <div class="col-sm-2 card col-xs-3"> 
 
      2 
 
     </div> 
 
     <div class="col-sm-2 card col-xs-3"> 
 
      1 
 
     </div> 
 
     <div class="col-sm-2 card col-xs-3"> 
 
      2 
 
     </div> 
 
     
 
     </div> 
 
    </div> 
 
    
 
    </body> 
 

 
</html>

来源

2017-07-17 03:52:04

1

根据您所提供即长宽比56:81卡高度应81/56*width。卡宽度根据引导程序类别col-xs-3（16.666667％）和col-sm-2（25％）而变化。

我们可以通过将它作为填充到div来保持上述高度。现在，如果我们向div中添加任何内容，那么div的高度会增加，以避免这种情况在您的div中添加包装。

填充百分比是24.1%即五十六分之八十一* 16.66667为sm和36.16%即56分之81* 25％％，持续xs

.card-wrapper { 
 
    padding-top: 24.1%; 
 
    background-color: grey; 
 
    border: 3px solid; 
 
    position: relative; 
 
} 
 

 
.card-content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right:0; 
 
} 
 

 
@media (max-width: 767px) { 
 
    .card-wrapper { 
 
    padding-top: 36.16%; 
 
    } 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link data-require="[email protected]*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    </head> 
 

 
    <body> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-sm-2 card-wrapper col-xs-3"> 
 
      <div class="card-content"> 
 
      1   
 
      </div> 
 
     </div> 
 
     <div class="col-sm-2 card-wrapper col-xs-3"> 
 
      <div class="card-content"> 
 
      2   
 
      </div> 
 
     </div> 
 
     <div class="col-sm-2 card-wrapper col-xs-3"> 
 
      <div class="card-content"> 
 
      1   
 
      </div> 
 
     </div> 
 
     <div class="col-sm-2 card-wrapper col-xs-3"> 
 
      <div class="card-content"> 
 
      2   
 
      </div> 
 
     </div> 
 
     <div class="col-sm-2 card-wrapper col-xs-3"> 
 
      <div class="card-content"> 
 
      1   
 
      </div> 
 
     </div> 
 
     <div class="col-sm-2 card-wrapper col-xs-3"> 
 
      <div class="card-content"> 
 
      2   
 
      </div> 
 
     </div> 
 
     <div class="col-sm-2 card-wrapper col-xs-3"> 
 
      <div class="card-content"> 
 
      1   
 
      </div> 
 
     </div> 
 
     <div class="col-sm-2 card-wrapper col-xs-3"> 
 
      <div class="card-content"> 
 
      2   
 
      </div> 
 
     </div> 
 
     
 
     </div> 
 
    </div> 
 
    
 
    
 
    </body> 
 

 
</html>

来源

2017-07-14 07:08:55

+0

这工作，不知道为什么。我想我可以以某种方式定义比率并保持它。像4：3一样，不管将来会怎样。但是， – Doomenik

相关问题

 相关问题