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

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

＆＃13;

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

＆＃13;

在中（md）屏幕上尽可能地缩小键列，但在较小的屏幕上，键列会捕捉到全宽。值列占用可用的剩余空间，在较小的屏幕上是全宽。这就是为什么两个列在较小的屏幕上捕捉到全宽的原因。

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

此外，您可以将多个键/值列放入同一行，方法是将它们与类似w-100的div分隔开来：

＆＃13;

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

＆＃13;

bootstrap网格等于列宽

1 个答案: