如何在 Bootstrap 中获取自动宽度列？答案

【问题标题】：How can I get auto-width columns in Bootstrap?如何在 Bootstrap 中获取自动宽度列？
【发布时间】：2016-09-24 13:43:18
【问题描述】：

如何像在 UIKit 中一样在 Bootstrap 中获取自动宽度列？

我需要 5 列自动宽度。

在 UIKit 中，您可以通过 <div class="uk-width-1-5"> 获得它

【问题讨论】：

基金会有这个功能。

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

Bootstrap 4+ 你可以单独使用 col 类，它会根据可用空间调整大小。

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

【讨论】：

嗨乔希。如何使用 bootstrap 3.3.7 实现它？
你不能。自动宽度计算是仅flexbox 提供的功能
@AllanJebaraj 虽然 flexbox 只存在于 Bootstrap 4+，但这并不意味着你不能。您可以研究 flexbox 并应用自己的 CSS 规则来覆盖列样式并应用自动宽度。 =]
已经一年半了！ :P 谢谢@giovannipds 我无法控制库，因为该版本中定义了许多组件和布局，我不想使已经复杂的代码库复杂化；)
@AllanJebaraj 哈哈，不用担心！如果您随时需要它，只需说出来，为此实现一点 css 类扩展很简单。 =]

【解决方案2】：

使用class="col" 将自动使列大小相等。

但是，如果您希望某些列根据其/那里的内容调整大小，请使用 class="col-auto" 之类的内容。

使用class="col-{breakpoint}-auto" 类来调整列的大小 内容的自然宽度。

参考： https://getbootstrap.com/docs/4.0/layout/grid/#variable-width-content

【讨论】：

【解决方案3】：

这个问题的 5 列方面一直是answered here

由于 Bootstrap 有 12 列，因此您只使用其中的 10 列和 5 个 col-*-2 单位

http://www.codeply.com/go/QXiPmtgJUJ

<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

就“自动宽度”而言，我不确定您的意思。 Bootstrap 4 将有新的 auto-layout columns 消耗任何行的剩余部分，但这仍然基于 12 列网格。

【讨论】：

自动宽度，表示列取最大单元格的宽度。