Bootstrap 列宽比率

Question

Bootstrap 网格系统当然是 12 列。

我想拥有并使用整个页面的所有 12 列。

但我希望左侧的前 6 列宽度为右侧列宽度的一半（即 50%）。

这样右边的第 6 列将始终是左边的两倍宽度。

此宽度比例应在更改 page/window 调整大小时保持不变。

我该怎么做？谢谢

Answer 1

此任务不适用于 boostrap 网格系统。 12 parts 表示 12 个等宽的部分。而你想要不等于 12 块。这是 display: grid;.

的任务

grid-template-columns: repeat(6, 2fr) repeat(6, 1fr);这部分的意思是我们对2fr取6次，然后对1fr取6次。 fr 是 grid 的新措施。这意味着所有网格都是一行中所有 fr 的总和。所以 2fr 是一个比 1fr 大两倍的块。在我们的例子中，我们连续有 2fr 2fr 2fr 2fr 2fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr = 18 个部分。这只是为了让你知道 hove fr 有效。

一些 CSS 网格文档的链接：

.grid-row {
  display: grid;
  grid-template-columns: repeat(6, 2fr) repeat(6, 1fr);
  grid-auto-rows: auto;
  grid-row-gap: .5rem;
  grid-column-gap: .5rem;
}

.grid-col {
  background: #000;
  min-height: 50px;
}

/* example of adaptivity for smaller screens */
@media (max-width: 500px) {
  .grid-row {  
    grid-template-columns: repeat(3, 2fr) repeat(3, 1fr);
  }
}

<div class="grid-row">
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
</div>

不确定，但如果您想要的不是两倍，而是 1.5 倍宽的列，请使用下一个。仅更新 grid-template-columns: repeat(6, 3fr) repeat(6, 2fr);

.grid-row {
  display: grid;
  grid-template-columns: repeat(6, 3fr) repeat(6, 2fr);
  grid-auto-rows: auto;
  grid-row-gap: .5rem;
  grid-column-gap: .5rem;
}

.grid-col {
  background: #000;
  min-height: 50px;
}

/* example of adaptivity for smaller screens */
@media (max-width: 500px) {
  .grid-row {  
    grid-template-columns: repeat(3, 3fr) repeat(3, 2fr);
  }
}

<div class="grid-row">
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
</div>

Bootstrap 列宽比率

Bootstrap Column Width Ratios

css

twitter-bootstrap

twitter-bootstrap-3

css-grid

bootstrap-4