使用Bootstrap在HTML中对齐文本

Question

样品

 text a b c d
 text2 a b c d
 text3 a b c d

结果应为

 text              a              b           c           d
 text2             a              b           c           d
 text3             a              b           c           d

我该怎么做？解决方案可能不依赖于引导程序。只是为了获得这样的观点。

Answer 1

http://jsfiddle.net/ptwL7

HTML

<table class="kenos-table">

    <th colspan="4">You could have a header if you wanted</th>

    <tr>
        <td>text 1</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
    </tr>

    <tr>
        <td>text 2</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
    </tr>

    <tr>
        <td>text 3</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
    </tr>

    <tr>
        <td>text 4</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
    </tr>

</table>

CSS

.kenos-table {
    width: 100%;
    max-width: 40em;
    border: 1px solid orange;
    border-collapse: collapse; /* key - remove me to see */   
}

.kenos-table th {
    display: none;
}

.kenos-table tr {
    /* - */
}

.kenos-table td {
    width: 20%;
    border: 1px solid gray;
}

Answer 2

使用twitter bootstrap 3

<div class="container">
    <div class="row">
        <div class="col-xs-2">textA</div>
        <div class="col-xs-2">a</div>
        <div class="col-xs-2">b</div>
        <div class="col-xs-2">c</div>
        <div class="col-xs-2">d</div>
    </div>
    <div class="row">
        <div class="col-xs-2">textB</div>
        <div class="col-xs-2">a</div>
        <div class="col-xs-2">b</div>
        <div class="col-xs-2">c</div>
        <div class="col-xs-2">d</div>
    </div>
</div>

请参阅http://jsfiddle.net/bbankes/ELamR/