Question

我正在寻找一种解决方案，使Twitter Bootstrap的列适合Body。像下面的例子。有一种强有力的方法吗？因为如果我正在尝试高度：100％或绝对位置（和顶部：0，底部：0等），它不能按预期工作（或者我有一个滚动条）。

那么我怎样才能将col放入身高，但是在移动设备（col-xs -...）上可以回退到“正常”的bootstrap用途？

非常感谢！

  Desktop view

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



  Mobile View:

  +---------------------------+
  |         LOGO ETC          |
  +---------------------------+
  |         OTHER STUFF       |
  +---------------------------+
  |                           |
  |         Navigation        |
  |                           |
  +---------------------------+
  |                           |
  |         Content           |
  |                           |
  |                           |
  +---------------------------+

Answer 1

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

您必须设置正文的高度（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>

Answer 2

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

https://jsfiddle.net/hwp9qw34/

您只需向自己的media-queries添加一些自定义div即可。另一种处理方法是使用Bootstraps .visible-*-*和.hidden-*-*类。但请注意：这最终会导致你的html和冗余标记膨胀，从而导致性能变慢。

Answer 3

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

Answer 4

您可以在bin中看到此处。如果您查看代码段，只需制作全屏视图。

.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>

如何使用Bootstrap将柱高调整到体内？

4 个答案: