Bootstrap 3水平和垂直分隔器

作者

我很难在我的网站上设置水平线和垂直线。不知道这有什么问题

我尝试使用边界，但我不确定我是否做得对

我想实现一个纵横交错的分割器，如下图所示：

我的代码是这样的：

&lt；div class=“容器液体”style=“边距：0px；填充：0px”&gt；
&lt；div class=“行”&gt；
&lt；div class=“col-xs-6 col-sm-6 col-md-3文本中心左span”id=“one”&gt&书信电报；h5&gt；富媒体广告制作&lt/h5&gt&书信电报；img src=”https://stackoverflow.com/questions/21343659/images/richmedia.png“&gt&lt/部门&gt；
&lt；div class=“col-xs-6 col-sm-6 col-md-3文本中心左span”id=“two”&gt&书信电报；h5&gt；网页设计及；发展&lt/h5&gt&书信电报；img src=”https://stackoverflow.com/questions/21343659/images/web.png“&gt&lt/部门&gt；
&lt；div class=“col-xs-6 col-sm-6 col-md-3文本中心左span”id=“三个”&gt&书信电报；h5&gt；移动应用程序开发&lt/h5&gt&书信电报；img src=”https://stackoverflow.com/questions/21343659/images/mobile.png“&gt&lt/部门&gt；
&lt；div class=“col-xs-6 col-sm-6 col-md-3文本中心右侧span“id=“four”&gt&书信电报；h5&gt；创意设计&lt/h5&gt&书信电报；img src=”https://stackoverflow.com/questions/21343659/images/mobile.png“&gt&lt/部门&gt；
&lt；div class=“col-xs-12”&gt&书信电报；人力资源&gt&lt/部门&gt；
&lt；div class=“col-xs-6 col-sm-6 col-md-3文本中心左span”id=“五”&gt&书信电报；h5&gt；网络分析&lt/h5&gt&书信电报；img src=”https://stackoverflow.com/questions/21343659/images/analytics.png“&gt&lt/部门&gt；
&lt；div class=“col-xs-6 col-sm-6 col-md-3文本中心左span“id=“six”&gt&书信电报；h5&gt；搜索引擎营销&lt/h5&gt&书信电报；img src=”https://stackoverflow.com/questions/21343659/images/searchengine.png“&gt&lt/部门&gt；
&lt；div class=“col-xs-6 col-sm-6 col-md-3文本中心左span”id=“seven”&gt&书信电报；h5&gt；移动应用程序开发&lt/h5&gt&书信电报；img src=”https://stackoverflow.com/questions/21343659/images/socialmedia.png“&gt&lt/部门&gt；
&lt；div class=“col-xs-6 col-sm-6 col-md-3文本中心右侧span”id=“八”&gt&书信电报；h5&gt；质量保证&lt/h5&gt&书信电报；img src=”https://stackoverflow.com/questions/21343659/images/qa.png“&gt&lt/部门&gt；
&lt；人力资源&gt；
&lt/部门&gt；
&lt/部门&gt；

你必须使用引导程序吗？下面是一个基本的HTML/CSS示例，用于获得不使用任何引导的外观：

HTML:

&lt；div class=“底部”&gt；
&lt；div class=“方框内容右侧”&gt；富媒体广告制作&lt/部门&gt；
&lt；div class=“方框内容右侧”&gt；网页设计及；发展&lt/部门&gt；
&lt；div class=“方框内容右侧”&gt；移动应用程序开发&lt/部门&gt；
&lt；div class=“盒子内容”&gt；创意设计&lt/部门&gt；
&lt/部门&gt；
&lt；部门&gt；
&lt；div class=“方框内容右侧”&gt；网络分析&lt/部门&gt；
&lt；div class=“方框内容右侧”&gt；搜索引擎营销&lt/部门&gt；
&lt；div class=“方框内容右侧”&gt；社交媒体&lt/部门&gt；
&lt；div class=“盒子内容”&gt；质量保证&lt/部门&gt；
&lt/部门&gt；

CSS:

.box内容{
显示：内联块；
宽度：200px；
填充：10px；
}
.底部{
边框底部：1px实心#ccc；
}
.对{
右边框：1px实心#ccc；
}

这是工作小提琴

更新

如果必须使用Bootstrap，下面是一个半响应示例，可以达到相同的效果，不过您可能需要编写一些额外的媒体查询

HTML:

&lt；div class=“行”&gt；
&lt；div class=“col-xs-3”&gt；富媒体广告制作&lt/部门&gt；
&lt；div class=“col-xs-3”&gt；网页设计及；发展&lt/部门&gt；
&lt；div class=“col-xs-3”&gt；移动应用程序开发&lt/部门&gt；
&lt；div class=“col-xs-3”&gt；创意设计&lt/部门&gt；
&lt/部门&gt；
&lt；div class=“行”&gt；
&lt；div class=“col-xs-3”&gt；网络分析&lt/部门&gt；
&lt；div class=“col-xs-3”&gt；搜索引擎营销&lt/部门&gt；
&lt；div class=“col-xs-3”&gt；社交媒体&lt/部门&gt；
&lt；div class=“col-xs-3”&gt；质量保证&lt/部门&gt；
&lt/部门&gt；

CSS:

。行：非（：最后一个子项）{
边框底部：1px实心#ccc；
}
.col-xs-3:不是（最后一个孩子）{
右边框：1px实心#ccc；
}

这是另一把小提琴

注意：

请注意，您也可以使用&lt；人力资源&gt元素，如果您愿意，也可以在引导中插入水平分隔符

相关文章：

  1. 如何使浮动元素居中？
  2. 用于Firefox的自定义CSS滚动条
  3. 大纲对文本的影响
  4. 如何调整单个flexbox项（覆盖调整内容）[重复]

发表评论

© 2026 开发百科-程序代码问答平台 • Built with