自动调整2行数据的列宽

Question

我正在使用bootstrap.我有2行3列数据.在bootstrap中,我必须使用手动调整列宽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>