css - Bootstrap 静态列宽

Question

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

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

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

有什么想法吗？谢谢!

Answer 1

对于这种特殊情况，我最好的建议实际上是不要将 Bootstrap 用于您需要的功能。您可以使用另一种解决方案轻松实现这一目标。我可以建议一个替代方案吗？

介绍显示:flex

The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

我写了一支笔来展示我对如何解决这个问题的想法，which you can see here .

让我们看一下代码，首先是新的 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;细节是……

This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto.

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

根据视口(viewport)大小堆叠

你可以看到我使用了一个带有 max-width: 768px 的基本媒体查询，当视口(viewport)小于这个时，我们通过设置 flex-flow 简单地堆叠内容区域: column 在父容器上，width: 100% 在其子容器上，这告诉浏览器将容器视为一列，从而将其元素堆叠在一起。

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