为什么这些列不采用定义的宽度和高度来适应使用 Bootstrap 的屏幕 [关闭]答案

【问题标题】：Why are these columns not taking defined width and height to fit the screen using Bootstrap [closed]为什么这些列不采用定义的宽度和高度来适应使用 Bootstrap 的屏幕 [关闭]
【发布时间】：2015-05-03 17:43:19
【问题描述】：

我刚开始在一个项目中使用 Bootstrap，我需要顶部三列，底部三列，前三列应占屏幕高度的 50%，其余 50% 由其他三列...全部在一个屏幕上

我已经使用了视口高度和视口宽度，如 cmets 中所述..

在 codepen 中它看起来不错，但在本地浏览器中，它给了我水平滚动，而且左栏中的一小部分内容也隐藏在屏幕上。

<http://codepen.io/neeraj8392/pen/OVVwEY>

【问题讨论】：

欢迎来到 SO。请在您的问题中包含代码。
身高百分比仅与他们的直系父母有关...请添加一些代码..
你的问题可能已经回答了，看看：stackoverflow.com/questions/15843391/…
感谢您的回复指导，我可以直接在这里添加代码？？？请指导我完成....下次我会更加小心我的问题
这听起来可能很愚蠢，但我应该如何将我的文件包含在此处发布？我需要使用codepen吗？？？请建议

标签： css html twitter-bootstrap

【解决方案1】：

在这种情况下，您应该考虑使用vh 和vw 单位，而不是%。

视口百分比长度与初始包含块。当初始的高度或宽度包含块被更改，它们会相应地缩放。然而，当根元素上的“溢出”值为“自动”时，任何滚动条形图假定不存在。请注意，初始包含块的大小受滚动条的影响视口。 ~w3.org

例如，

html,
body {
  margin: 0;
  padding: 0;
  font-size: 0;
}
.item {
  height: 50vh;
  white-space: 0;
  width: 32vw;
  margin: 0;
  background: tomato;
  display: inline-block;
  font-size: initial;
  transition: all 0.6s;
}
.item:hover {
  background: cornflowerblue;
}

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>

将始终填满屏幕大小，无论它是什么大小。

您可能会注意到我已将 font-size 设置为 0，然后在我的 .item 类中设置为“initial”。这是为了“修复”通过内联块元素生成的边距。

您还需要确保元素之间没有空格，因为它们将被视为 html 中的实际空格。

【讨论】：

【解决方案2】：

由于 100 不能被 3 整除，因此您无法使 3 列的宽度完全相同，因此我将中间列稍微宽了一点 (0.001%)。

html,
body {
  margin: 0;
  padding: 0;
  font-size: 0;
  overflow:hidden;
}
#grid > div {
  height: 50vh;
  width: 33.333vw;
  margin: 0;
  display: inline-block;
  font-size: 16px;
}
#grid > div:nth-child(3n+2) { width: 33.334vw; }
#grid > div:nth-child(1) { background: brown; }
#grid > div:nth-child(2) { background: green; }
#grid > div:nth-child(3) { background: pink; }
#grid > div:nth-child(4) { background: purple; }
#grid > div:nth-child(5) { background: blue; }
#grid > div:nth-child(6) { background: orange; }

<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

【讨论】：