html - 如何使用 css 设置类似表格的 div 样式？如何填充 "column"？

Question

我需要在 Bootstrap 列中做这样的事情:

我能做的最好的就是这样，使用这样的 html:

<div class="row">
   <div class="col-xs-2 event-date-container">
       <p class="event-date">OCT 4</p>
   </div>
   <div class="col-xs-10">
       <p class="color-text-green">ALL CAMPUSES</p>
       <p>Ada dua ekor serigala di hutan</p>
   </div>
</div>
<div class="row">
   <div class="col-xs-2 event-date-container">
       <p class="event-date">OCT 18</p>
   </div>
   <div class="col-xs-10">
       <p class="color-text-green">ALL CAMPUSES</p>
       <p>Ada dua ekor serigala di hutan belantara, serigala B menantang serigala A</p>
   </div>
</div>

使用 CSS:

event-date {
    text-align: center;
    font-family: fantasy;
    color: #222222;
}
event-date-container {
    padding: 5px;
    background-color: gray;
}

颜色文本绿色给颜色绿色是这样的:

如何用全背景色填充第一列？我可以使用任何其他技巧来改进它吗？

Answer 1

默认的 Bootstrap 网格系统无法实现您想做的事情。每个.col-*-*将只占用它需要的高度，因为它是 float编辑。

如果可能，我会使用表格样式来实现您想要的。既然您正在做的是 表格，为什么不简单地使用 Bootstrap 表格样式呢？

使用<table>

http://jsfiddle.net/spjm90cf/1/

HTML:

<table class="table event-table">
    <tr>
       <td class="event-date-container">
           <p class="event-date">OCT 4</p>
       </td>
       <td>
           <p class="color-text-green">ALL CAMPUSES</p>
           <p>Ada dua ekor serigala di hutan</p>
       </td>
    </tr>
    <tr>
       <td class="event-date-container">
           <p class="event-date">OCT 18</p>
       </td>
       <td>
           <p class="color-text-green">ALL CAMPUSES</p>
           <p>Ada dua ekor serigala di hutan belantara, serigala B menantang serigala A</p>
       </td>
    </tr>
</table>

CSS:

/* Remove Bootstrap's dividing lines */
.event-table > tbody > tr > td {
    border-width: 0;
}

.event-date {
    text-align: center;
    font-family: fantasy;
    color: #222222;
}
.event-date-container {
    padding: 5px;
    background-color: gray;
}

操纵网格系统

http://jsfiddle.net/spjm90cf/2/

如果由于某种原因您不能使用表格，这里有一种设置 .row 样式的方法s 和 .col-*-* s 变成一个类似表格的结构:

HTML(你需要一个容器作为“表格”):

<div class="container-table">
    <div class="row">
       <div class="col-xs-2 event-date-container">
           <p class="event-date">OCT 4</p>
       </div>
       <div class="col-xs-10">
           <p class="color-text-green">ALL CAMPUSES</p>
           <p>Ada dua ekor serigala di hutan</p>
       </div>
    </div>
    <div class="row">
       <div class="col-xs-2 event-date-container">
           <p class="event-date">OCT 18</p>
       </div>
       <div class="col-xs-10">
           <p class="color-text-green">ALL CAMPUSES</p>
           <p>Ada dua ekor serigala di hutan belantara, serigala B menantang serigala A</p>
       </div>
    </div>
</div>

CSS:

.container-table {
    display: table; 
    width: 100%;
}

.container-table .row {
    display: table-row;
}

.container-table [class^="col-"] {
    display: table-cell;
    float: none;
}

.event-date {
    text-align: center;
    font-family: fantasy;
    color: #222222;
}
.event-date-container {
    padding: 5px;
    background-color: gray;
}