Question

我刚开始使用Bootstrap进行项目，我需要在顶部有三列，在底部需要三列，前三列应该占据屏幕高度的50％，其他三列需要50％...所有在一个屏幕上

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

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

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

Answer 1

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

视口百分比长度是相对于的大小初始包含块。当初始的高度或宽度包含块被更改，它们会相应缩放。然而，当根元素上的'overflow'值为'auto'时，任何滚动假设条不存在。注意初始包含块的大小受到滚动条的存在的影响视。〜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中的实际空间。

Answer 2

由于你不能使3列具有完全相同的宽度，因为100不能均匀地除以3，所以我使中间列略宽（.001％）。

＆＃13;

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

＆＃13;

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

＆＃13;

为什么这些列没有使用Bootstrap来定义宽度和高度以适应屏幕

2 个答案: