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 ，以便内部的所有内容浮动并根据内容自动调整其宽度？现在宽度是固定的，所以即使我的第3个div中的数据很少，它仍然会消耗大量的空间。伙计们好吗？新手到CSS

Answer 1

解决方案：

如果您的内容占用的空间小于引导列的宽度。你最好不要使用bootstrap列类，只需将 float：left 简单地放到简单div中的内容中。

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

参考：

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

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

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

Answer 2

您可以使用float：right在右侧移动内容并尝试使用display：table

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

如何根据内部数据自动调整引导列宽度的大小

2 个答案: