Question

我对Bootstraps容器流体和垂直分割有一般性的疑问。我已经阅读了很多帖子，但我似乎无法找到解决这一特定问题的方法。

我有一个容器流体，它在水平方向上除以12，但我希望它在垂直方向上除以12。这是因为我想保持纵横比相同。

基本上有一种方法我可以说......''
我想控制文本容器和图像的宽高比。

Answer 1

这就是我要做的事情

你必须设置＆＃39;身高＆＃39;从根元素到更深的属性，使这种效果起作用。

<强> CSS

html, body,
.full-height {
    height: 100%;
}
.row-md-1 {
   height: 8.3%;
   max-height: 8.3%;
}
.row-md-1:last-child {
   height: 8.4%;
}
.cell {
  height: 100%;
  overflow: hidden;   
}

<强> HTML

<html>
<body>
  <div class="container-fulid full-height">
    <div class="row row-md-1">
       <div class="col-md-1 col-xs-1 cell"></div>
       <div class="col-md-1 col-xs-1 cell"></div>
       <div class="col-md-1 col-xs-1 cell"></div>
       <div class="col-md-1 col-xs-1 cell"></div>
       <div class="col-md-1 col-xs-1 cell"></div>
       <div class="col-md-1 col-xs-1 cell"></div>
       <div class="col-md-1 col-xs-1 cell"></div>
       <div class="col-md-1 col-xs-1 cell"></div>
       <div class="col-md-1 col-xs-1 cell"></div>
       <div class="col-md-1 col-xs-1 cell"></div>
       <div class="col-md-1 col-xs-1 cell"></div>
       <div class="col-md-1 col-xs-1 cell"></div>
   </div>
    ...  11 rows later
</div>
</body>
</html>

<强>样品

http://www.bootply.com/0OJVOy28BD#

在上面的示例中，使用100％的高度，但您可以使用一点点javascript将其更改为与宽度相同的高度。我不知道使用CSS的纯粹形式。

完整示例：

http://www.bootply.com/8JyjPpKyxm

容器 - 流体垂直分区

1 个答案: