如何使用引导将列高度安装到正文中

>我正在寻找一种解决方案，将Twitter Bootstrap的列放入正文中。就像下面的例子。有没有一种强大的方法可以做到这一点？因为如果我尝试使用 height：100% 或绝对位置（以及顶部：0、底部：0 等）进行尝试，它将无法按预期工作（或者我有一个滚动条）。

那么我怎样才能将 col 安装到身体高度中，但在移动设备（col-xs-...）上回退到"正常"的引导用法？

多谢！

  Desktop view
  +---------------------------+---------------------+
  |         LOGO ETC          |    OTHER STUFF      |
  |         Height: ~20%      |    Height: ~20%     |
  +---------------------------+---------------------+
  |            |                                    |
  |            |                                    |
  | Navigation |         Content                    |
  |    80%     |           80%                      |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+

  Mobile View:
  +---------------------------+
  |         LOGO ETC          |
  +---------------------------+
  |         OTHER STUFF       |
  +---------------------------+
  |                           |
  |         Navigation        |
  |                           |
  +---------------------------+
  |                           |
  |         Content           |
  |                           |
  |                           |
  +---------------------------+

单击"整页"以查看桌面视图。

您必须设置正文（div 的父级）的高度，以使高度以div 的百分比为单位才能工作，然后设置 html（正文的父级）的高度。

div {
  border: 1px solid black;
}
html {
  height: 100%;
}
body {
  height: 100%;
}
.div1,
.div2 {
  height: 40%;
}
.div3,
.div4 {
  height: 60%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="div1 col-xs-12 col-md-6">div1</div>
<div class="div2 col-xs-12 col-md-6">div2</div>
<div class="div3 col-xs-12 col-md-3">div3</div>
<div class="div4 col-xs-12 col-md-9">div4</div>

由于没有任何代码来自您，这里有一个小例子来说明它是如何工作的。

https://jsfiddle.net/hwp9qw34/

您可以简单地将一些自定义media-queries添加到您的div中。处理此问题的另一种方法是使用 Bootstraps .visible-*-* 和 .hidden-*-* 类。但请注意：这完全会导致您的 html 和冗余标记膨胀，从而导致性能降低（er）。

<div class="col-xs-12 col-md-12">
   <div class="row">
       <div class="col-xs-12 col-md-6">logo</div>
       <div class="col-xs-12 col-md-6">other stuff</div>         
   </div>
   <div class="row">
       <div class="col-xs-12 col-md-4">navigation</div>
       <div class="col-xs-12 col-md-8">content</div>         
   </div> 

</div>

你可以在我的垃圾箱中看到这里。如果您查看片段，只需全屏查看即可。

.divs{
  background:blue;
  border: 1px solid #000;
  min-height:100px;
  color:#fff;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
   <div class='container'>
    <div class="text-center col-sm-6 col-md-6 col-lg-6 divs">
  logo
    </div>
    <div class="text-center col-sm-6 col-lg-6 divs">
  other stuff
    </div>
    <div class="text-center col-sm-12 col-md-3 col-lg-3 divs">
  nav
    </div>
    <div class="text-center col-sm-12 col-md-9 col-lg-9 divs">
  content
    </div>
  </div>
</body>
</html>

相关内容

最新更新

热门标签：