如何根据内部数据自动调整引导列宽答案

【问题标题】：How to auto re-size the bootstrap column width based on data inside如何根据内部数据自动调整引导列宽
【发布时间】：2018-02-03 02:37:39
【问题描述】：

嗨，我的行类中有 3 个 div。

<div class="row">
    <div class="col-3">some content</div>
    <div class="col-9">
      <div class="col-4">
        <div class="col-12">
          <div class="col-6">conetnt</div>
          <div class="col-6">conetnt</div>
        </div>
      </div>
      <div class="col-8"> content </div>
    </div>
</div>

我该如何修改这个 HTML 以便里面的所有内容都向右浮动并根据内容自动调整其宽度？现在宽度是固定的，所以即使我的第三个 div 中的数据非常少，它仍然会消耗大量空间。有什么想法吗？ CSS 新手

【问题讨论】：

我想将第二个 div 中的全部内容浮动到右侧，并坚持第三个 div 左侧
嘿，如果你想要更少的空间，为什么不使用 col-md-1
如果你想要它的宽度应该和内容一样多，只需使用 div 而不是任何引导类并将float:left 应用于父 div
你的代码因为错误的类而不能工作。您缺少引导列类的视口前缀（例如 .col-md-1）：getbootstrap.com/docs/3.3/css/#grid
引导网格类被用作col-md-12 而不是col-12 你使用了错误的类

标签： javascript html css twitter-bootstrap

【解决方案1】：

解决方案：

如果您的内容占用的空间小于引导列的宽度。您最好将其放置在没有引导列类的情况下，并将其简单地 float:left 提供给简单 div 内的内容。

它将根据您的内容自动调整大小。您可能需要为您的 div 提供 display:inline 以显示该 div 内联。

更新： 您可以使用弹性盒。 display: flex 到容器，可以根据需要使用 flex-direction 属性。

参考：

首先您需要研究引导网格系统的行为。这个官方的引导文档是关于引导的网格系统（最新版本）。

https://getbootstrap.com/docs/4.0/layout/grid/

它将帮助您了解引导行和列中的内容管理。

【讨论】：

【解决方案2】：

您可以使用 float:right 将内容向右移动并尝试使用 display: table

看看这里：https://v4-alpha.getbootstrap.com/layout/grid/

【讨论】：

嘿，他没有使用正确的类，甚至他也不具体……他需要阅读引导程序的文档