如何实现bootstrap中的表格样式

Question

原网页网址：http://www.bootcdn.cn/
效果如图：

目前实现的效果是这样的，会出现错位的情况：

Answer 1

将头bootstrap设置为float:left，后面的内容设置 display: inline，就可以自动的铺平后续的位置，但会出现乱序，可用padding-left来设置，就不会乱序了。
效果如下：

html代码：
<div class="row" >

        <div class="head">
            <h4>angular.js</h4>
        </div>
        <div>
            <span>
                <p>AngularJS is an MVC framework for building web applications. The core features include HTML enhanced with custom component and data-binding capabilities, dependency injection and strong focus on simplicity, testability, maintainability and boiler-plate reduction.</p>
            <p class="count">
                *64254
            </p>
            </span>
        </div>
    </div>

css代码：
/row的样式/
main .row {

height: auto;
min-height: 5.5em;
border: solid;
border-width: 1px;
border-color: #f5f5f5;
background-color: #ffffff;

}
main .row:hover {

background-color:#f5f5f5 ;

}
/将head设置为float/
main .row .head {

display: inline;
float: left;
width: 10em;
min-width: 10em;
padding-top: 0em;
margin-left: 2em;

}
/当内容比较多时，会乱行，加上左边距就不会了，但也存在问题，这样加完之后，无论浏览器怎么缩小，都不是自动的换行，如果不加的话，是可以随着浏览器的大小自动换行的/
span p {

padding-left: 12em;

}
/和上面那个span p是一个理由/
.count {

margin-top: 0em;
padding-left: 12em;
padding-top: 0em;

}

Answer 2

加个break-word:all试试