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 的内置列。

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

Answer 2

对于这种特殊情况，我最好的建议实际上是不要将 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。

我们看一下代码，先上，new HTML:

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

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

  </div>
</div>

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

这是随附的 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.

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

根据视口大小堆叠

你可以看到我使用了 max-width: 768px 的基本媒体查询，当视口小于这个时，我们只需在父容器上设置 flex-flow: column 和 width: 100% 在其子项上，它告诉浏览器将容器视为一列，从而将其元素堆叠在一起。

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

Bootstrap 静态列宽

Bootstrap Static Column Width

css

twitter-bootstrap

twitter-bootstrap-3

responsiveness