自动调整2行数据的列宽

Question

我正在使用引导程序。 我有2行3列数据。 在引导程序中，我必须使用col-md-(number)手动调整列宽。 是否可以通过引导程序自动调整列宽？

下面是我的html代码。 列宽已手动设置为col-md-2

    <div class="row">
       <div class="col-md-2"><h4> <b>Col 1</b> </h4> </div>
       <div class="col-md-2"><h4> <b>Col 2</b> </h4> </div>
       <div class="col-md-2"><h4> <b>Col 3</b> </h4> </div>
    </div> 
    <div class="row">
       <div class="col-md-2"> {{Col1}} </div>
       <div class="col-md-2"> {{Col2}} </div>
       <div class="col-md-2"> {{Col3}} </div>
    </div> 

Answer 1

Bootstrap中没有任何内容，但是您可以自己编写代码。

这是css的一种方式（最多编码5个项目：要完成，只需管理媒体查询并完成直到12个项目即可。

Bootply ： http ： //www.bootply.com/sGqPKy3rpH

CSS ：

.col-md-auto{
  padding: 0 15px 0 15px;
  float:left;
}

/* 1 item */
.col-md-auto:first-child:nth-last-child(1) {
    width: 100%;
}

/* 2 items */
.col-md-auto:first-child:nth-last-child(2),
.col-md-auto:first-child:nth-last-child(2) ~ div {
    width: 50%;
}

/* 3 items */
.col-md-auto:first-child:nth-last-child(3),
.col-md-auto:first-child:nth-last-child(3) ~ .col-md-auto {
    width: 33.3333%;
}

/* 4 items */
.col-md-auto:first-child:nth-last-child(4),
.col-md-auto:first-child:nth-last-child(4) ~ .col-md-auto {
    width: 25%;
}

/* 5 items */
.col-md-auto:first-child:nth-last-child(5),
.col-md-auto:first-child:nth-last-child(5) ~ .col-md-auto {
    width: 20%;
}

HTML ：

<div class="row">
  <div class="col-md-auto">1</div>
  <div class="col-md-auto">2</div>
  <div class="col-md-auto">3</div>
</div>