css - 在 Bootstrap 中创建响应式分隔线(垂直/水平)

标签 css twitter-bootstrap twitter-bootstrap-3 responsive-design

我在 Bootstrap 中创建响应式分隔线时有些吃力。我所说的响应式分隔器是指在大屏幕上是垂直的,在小屏幕上是水平的。

垂直分隔线:

Vertical divider

水平分隔线:

Horizontal divider

最佳答案

这是一个简单的示例,如何通过 Bootstrap 4.1 制作带有单词的响应式水平线

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
  <hr class="my-auto flex-grow-1">
  <div class="px-4">SOME TEXT HERE</div>
  <hr class="my-auto flex-grow-1">
</div>

关于css - 在 Bootstrap 中创建响应式分隔线(垂直/水平),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36447725/

相关文章:

css - 如何在 Slickgrids 中自动换行标题栏

元素没有类时的 CSS 选择器

javascript - Knockout + Bootstrap 3 单选按钮

html - Bootstrap 3 不在手机和平​​板电脑上将元素居中

css - 将标题菜单/导航栏的文本变成小视口(viewport)的图标(rails 4/bootstrap3)

javascript - 在 div 前面添加半黑色透明覆盖层

css - 有人能告诉我们是否可以在@media print css 中使用 Font awesome 图标吗?他们像在网络上一样工作吗?

asp.net-mvc - 使用 ASP.NET MVC 的跨设备 Web 应用程序

css - Bootstrap 3 两个响应行彼此相邻?

javascript - 引导日期选择器验证不起作用