首页 > 如何实现bootstrap中的表格样式

如何实现bootstrap中的表格样式

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

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


加个break-word:all试试


将头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;

}

【热门文章】
【热门文章】