html 垂直线代码,html – Bootstrap 3水平和垂直分隔线

你必须使用Bootstrap吗？这是一个基本的HTML / CSS示例，用于获取不使用任何Bootstrap的外观：

HTML：

Rich Media Ad Production

Web Design & Development

Mobile Apps Development

Creative Design

Web Analytics

Search Engine Marketing

Social Media

Quality Assurance

CSS：

.box-content {

display: inline-block;

width: 200px;

padding: 10px;

}

.bottom {

border-bottom: 1px solid #ccc;

}

.right {

border-right: 1px solid #ccc;

}

更新

如果您必须使用Bootstrap，这里是一个半响应的示例，可以实现相同的效果，尽管您可能需要编写一些其他媒体查询。

HTML：

Rich Media Ad Production

Web Design & Development

Mobile Apps Development

Creative Design

Web Analytics

Search Engine Marketing

Social Media

Quality Assurance

CSS：

.row:not(:last-child) {

border-bottom: 1px solid #ccc;

}

.col-xs-3:not(:last-child) {

border-right: 1px solid #ccc;

}

注意：

请注意，您也可以使用< hr>元素在Bootstrap中插入一个水平分隔线，如果你愿意的话。