引导网格等于列宽答案

【问题标题】：bootstrap grid equal column width引导网格等于列宽
【发布时间】：2018-01-08 01:24:47
【问题描述】：

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

..
<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 个网格不太适合我。

【问题讨论】：

尝试将col-sm-12 col-lg-6添加到两个div
它没有用。不过谢谢！
只需使用普通表格，在较小的屏幕上将 th 和 td 设置为 display:block

标签： twitter-bootstrap bootstrap-4 grid-layout

【解决方案1】：

根据你的描述，你想要的是这样的：

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

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

我使用了 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>

【讨论】：