html - 使用 Bootstrap 4 Grid 创建动态和固定宽度的列结构

Question

我希望使用 Bootstrap 4 并创建一个可以放置内容的简单网格。我想修复除 1 之外的所有列，它是左侧的列，并且将有一个名称。右侧的列是 7 个输入字段和 1 个 div，我想保留页面右侧和固定宽度。

在调整大小时，仅调整左侧列的大小。

我试图在引导程序中使用 flex 来实现它，但未能让它在本地工作。

有任何想法吗？

Answer 1

只需通过包装所有元素并应用display: grid;到它来使用 css-grid。

然后使用grid-template-columns: auto repeat(7, 60px) 100px;来实现想要的行为。repeat(7, 60px)将给接下来的 7 个元素一个精确的宽度，60px然后是最后一个元素100px。auto开头的值将自动将所有剩余空间分配给第一个元素。

body {
  min-width: 600px;
  margin: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: auto repeat(7, 60px) 100px;
  grid-gap: 2px;
  padding: 5px;
}

.grid-container div {
  border: 1px solid black;
}

<div class="grid-container">
  <div></div>
  <input>
  <input>
  <input>
  <input>
  <input>
  <input>
  <input>
  <div></div>
</div>