javascript - 如何根据内部数据自动调整 Bootstrap 列宽

Question

您好，我的行类中有 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 新手

Answer 1

解决方案:

如果您的内容占用的空间小于 Bootstrap 列的宽度。你最好把它放在没有 Bootstrap 列类的地方，并简单地将它float:left 给你的简单 div 中的内容。

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

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

引用:

首先，您需要研究自举网格系统的行为。这个官方 Bootstrap 文档是关于 Bootstrap (最新版本)的网格系统的。

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

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