Question

这更像是一个最佳实践问题。所以，假设我在Bootstrap中有两个cols，我希望将右侧col设置为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>

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

有什么想法？谢谢！

Answer 1

对于这种特殊情况，我最好的建议实际上是不使用Bootstrap来实现你所拥有的功能。你可以通过另一种解决方案轻松实现这一目标。我可以建议另类吗？

介绍display：flex

Flexbox布局（灵活盒子）模块（目前是W3C最后调用工作草案）旨在提供一种更有效的方式来布置，对齐和分配容器中的项目之间的空间，即使它们的大小未知和/或动态的（因此是“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;，稍微详细一点......

这是柔性增长，柔性收缩和柔性基础的简写结合。第二和第三个参数（flex-shrink和flex-basis）是可选的。默认值为0 1 auto。

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

根据视口大小进行堆叠

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

如果有什么不清楚请告诉我，我会改进我的答案。

Answer 2

您应该避免使用bootstrap的内置列来执行此任务。

当他们不遵守引导程序的默认行为时，您可以（并且应该！）使用@media为您自己的类定义自己的媒体大小规则。例如，@media (min-width: 768px) { .my-class: { width: 300px; } }。您可以在Mozilla Dev上阅读@media。

Bootstrap静态列宽

2 个答案: