Question

Boostrap中是否有办法根据视口的宽度调整网格列？我有以下页面，第一列是col-md-3，第二列是col-md-9：

当用户选择左侧列中的文件夹时，右侧列应显示文件列表。然而，列宽保持固定，如果我将屏幕宽度减小到一点点，则右侧列移动到左侧列的下方。然后左侧列填充屏幕的高度和宽度，文件列表列在其下方不可见，这使得用户体验非常糟糕。

是否有一些方法，最好是在Bootstrap中，让列调整其宽度与屏幕宽度成比例，或者是否有一些替代Bootstrap的网格可以像这样工作？

Answer 1

您可以使用css网格简单地实现此目的。

＆＃13;

body{
  margin:0;
}
.container{
  display:grid;
  grid-template: 100vh / repeat(12, 1fr);
  color:#fff;
}
.container > div{
  display: flex;
  justify-content: center;
  align-items:center;
  font-size: 2em;
}
.left-panel{
  grid-column: 1 / 4;
  background: #F7A072;
}
.right-panel{
  grid-column: 4 / -1;
  background: #0FA3B1;
}

＆＃13;

<body>
  <div class="container">
    <div class="left-panel">Left</div>
    <div class="right-panel">Right</div>
  </div>
</body>

＆＃13;

具有可变宽度列的Bootstrap网格

1 个答案: