Question

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

我需要5列自动宽度。

在UIKit中，您可以使用<div class="uk-width-1-5">

获取它

我发现只有繁琐的解决方法。

由于

Answer 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>

Answer 2

此问题的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列网格。

Answer 3

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

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

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

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

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

3 个答案: