twitter-bootstrap - Bootstrap 网格等于列宽

Question

我有一个简单的两列键值网格，跨越一组行

..
<div class="row">
  <div class="col-md-auto">KEY</div>
  <div class="col">VALUE</div>
</div>
..

我想要一个类似表格的行为，即键列的宽度自动适应行中最宽的键。

最好使用如下表格来完成:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

但是，我希望具有网格系统提供的较小显示器的堆栈功能。

大显示屏

KEY, VALUE

小显示屏

KEY,
VALUE,

我想使用自动调整，因为可用的 12 个网格不太适合我。

Answer 1

根据您的描述，您想要的是:

<div class="container">
    <div class="row">
        <div class="col-12 col-md-auto">KEY</div>
        <div class="col">VALUE</div>
    </div>
</div>

这会在中型 (md) 屏幕上尽可能缩小键列，但在较小的屏幕上，键列会对齐到全宽。值列占据任何可用的剩余空间，在较小的屏幕上是整个宽度。这就是为什么两列在较小的屏幕上都会对齐到全宽。

我使用了 md 类，因为这就是您代码中的内容。对于大屏幕，您需要使用 lg 类。

此外，您还可以将多个键/值列放入同一行，方法是用具有 w-100 类的 div 分隔它们，如下所示:

<div class="container">
    <div class="row">
        <div class="col-12 col-md-auto">KEY</div>
        <div class="col">VALUE</div>
        <div class="w-100"></div>
        <div class="col-12 col-md-auto">KEY</div>
        <div class="col">VALUE</div>
    </div>
</div>