Bootstrap 静态列宽

Question

这更像是一个最佳实践问题。所以，假设我在 Bootstrap 中有两个列，我希望将正确的列设置为 300 像素，直到它到达 768 像素断点，然后将其堆叠。

<div class="container">
  
  <div class="row">
    
    <!-- This column needs to fill the rest of the container fluidly -->
    <div class="col-sm-8"></div>
    
    <!-- This column needs to stay 300px -->
    <div class="col-sm-4"></div>
    
  </div>
  
</div>

我最初的解决方案是只向每个容器添加类，并为每个媒体断点静态设置两个容器的宽度，然后在堆栈断点上将宽度设置为 auto。但是，我不喜欢这个解决方案，因为它非常冗长，而且将列都设置为静态似乎太脆弱了。我更喜欢左列使用动态混合或设置百分比。

有什么想法吗？谢谢！

Answer 1

对于这个特定的场景，我最好的建议实际上是不要使用 Bootstrap 来实现您想要的功能。您可以使用另一种解决方案来实现这一点。我可以建议一个替代方案吗？

介绍显示：flex

Flexbox 布局（Flexible Box）模块（目前是 W3C Last Call 工作草案）旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知和/或动态（因此“弯曲”一词）。

我写了一支笔，展示了我如何解决这个问题的想法，您可以在这里看到。

让我们看一下代码，首先是新的 HTML：

<div class="flex-container">
  <div class="left-content content">

  </div>
  <div class="right-content content">

  </div>
</div>

我们的结构与您在这里已经处理的结构类似，只是我们稍微改变了格式（我使用了类名，这应该有助于说明正在发生的情况。）

这是随附的 CSS：

.flex-container {
  display: flex;
  flex-flow: row;
}

.content {
  min-height: 500px;
}

.left-content {
  background-color: rgba(0,0,0,0.2);
  flex: 1 1 auto;
}

.right-content {
  width: 300px;
  background-color: rgba(0,0,0,0.4);
}

@media (max-width: 768px) {
  .flex-container {
    flex-flow:column;
  }
  .right-content {
    width: 100%;
  }
}

因此，最初，我们希望使用该flex-flow: row属性来让我们的元素并排显示（这意味着容器本质上将其子元素排列成一行）。300px我们在右侧列上设置固定宽度，然后使用flex: 1 1 auto;左侧的属性，更详细地说是......

这是 flex-grow、flex-shrink 和 flex-basis 组合的简写。第二个和第三个参数（flex-shrink 和 flex-basis）是可选的。默认值为 0 1 自动。

上面的属性告诉项目填充容器的剩余空间。

根据视口大小进行堆叠

您可以看到我使用了基本媒体查询max-width: 768px，当视口小于此值时，我们只需通过flex-flow: column在父容器及其width: 100%子容器上设置来堆叠内容区域，这告诉浏览器将容器视为一列，并且从而将其元素堆叠在一起。

如果有任何不清楚的地方，请告诉我，我会改进我的答案。