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>

自动调整2行数据的列宽

1 个答案: