html - 如何在图标之间创建垂直线(同时使用带有 html 元素的 Bootstrap 列类)-6ren

html - 如何在图标之间创建垂直线(同时使用带有 html 元素的 Bootstrap 列类)

转载作者：太空宇宙更新时间：2023-11-04 13:07:40

我正在尝试在两个图标之间设置边界线，如下图所示。

我正在使用 Bootstrap 框架并编写了以下代码来实现它。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head 
         content must come *after* these tags -->
    <title>Border</title>
     <!-- Bootstrap -->
    <link href="./bootstrap.min.css" rel="stylesheet">
    <link href="./bootstrap-theme.min.css" rel="stylesheet">
    <link href="./font-awesome.min.css" rel="stylesheet">
    <link href="./bootstrap-social.css" rel="stylesheet">
    <style>

            body{
                background-color:lightgrey; 
            }
           
            #div1{
                 background-color:white; 
            }
			
            .timeline {
              position: relative;
              margin: 10px 0;
              padding: 0;
              list-style: none;
              counter-reset: section;
            }
            .timeline:before {
              content: '';
              position: absolute;
              top: 0;
              bottom: 0;
              width: 3px;
              background: #fdb839;
              left: 32px;
              margin: 0;
              border-radius: 2px;
            }
            .timeline > div {
              position: relative;
              margin-right: 10px;
              margin-bottom: 50px;
              padding-top: 18px;
              box-sizing: border-box;
              padding-left: 90px;
            }
            .timeline > div:before,
            .timeline > div:after {
              display: block;
            }

            .timeline > div:before {
              counter-increment: section;
              content: counter(section);
              background: #fdb839;
              width: 70px;
              height: 70px;
              position: absolute;
              top: 0;
              border-radius: 50%;
              left: -1px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #Fff;
              font-size: 22px;
              font-weight: bold;
              border: 15px solid #fff;
              box-sizing: border-box;
            }
            .timeline > div:after {
              clear: both;
            }

             
    </style>
</head>

<body>
            <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-11 col-sm-offset-1">
                    <form class="form-horizontal" role="form" id="form1">
					
                                <div id="div1" class="form-group"> 
                                <div class="timeline">
                                <div class="col-xs-12 col-sm-9 col-sm-offset-2">
                                    <br>
                                    <p>
                                    A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
                                    A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
                                    </p>
                                    <br>
                                </div>
                                <div class="col-xs-12 col-sm-9 col-sm-offset-2">
                                    <br>
                                    <p>
                                    A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
                                    A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
                                    </p>
                                    <br>
                                </div>
                                <div class="col-xs-12 col-sm-9 col-sm-offset-2">
                                    <br>
                                    <p>
                                    A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
                                    A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
                                    </p>
                                    <br>
                                </div>
                                <div class="col-xs-12 col-sm-9 col-sm-offset-2">
                                    <br>
                                    <p>
                                    A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
                                    A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
                                    </p>
                                    <br>
                                </div>
                                <div class="col-xs-12 col-sm-9 col-sm-offset-2">
                                    <br>
                                    <p>
                                    A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
                                    A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
                                    </p>
                                    <br>
                                </div>
                                <div class="col-xs-12 col-sm-9 col-sm-offset-2">
                                    <br>
                                    <p>
                                    A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
                                    A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
                                    </p>
                                    <br>
                                </div>
                                </div>
                                </div>
                                
                <!--</div>-->
                </form>
                </div>
            </div>
            </div>
            
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            <script src="./bootstrap.min.js"></script>           
</body>
</html>

我无法获得两个图标之间的界线。但是，当我使用不带列类的 div 元素时，它工作得非常好。但是，我建议将列类与 Bootstrap 框架一起使用。我将如何实现同样的目标？

最佳答案

我使用了带有彩色左边框和伪元素的简单 Bootstrap 布局。
您可以添加嵌套的列和图像。

two columns with images

一栏图片

当屏幕宽度为 767px 或更小时，图像会彼此重叠放置。

jsfiddle

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

body {
  background: lightgrey; 
}

.timeline {
  background: white; 
  counter-reset: section;
  margin: 20px auto;
  padding-left: 70px;
  padding-top: 50px;
}

.timeline .col-xs-12 {
  border-left: solid 4px orange;
  padding-bottom: 80px;
  padding-left: 40px;
  padding-right: 60px;
}

.timeline .col-xs-12:before {
  /* counter */
  counter-increment: section;
  content: counter(section);
  /* position */
  position: absolute;
  left: -22px; /* = (width + border-left) / 2 */
  top: -30px;
  /* form & size */
  border-radius: 50%;
  height: 40px;
  width: 40px;
  /* colors & text */
  background: orange;
  color: white;
  font-size: 22px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
}


/* images */
.timeline img {
  margin-top: 20px;
  width: 100%;
}

<div class="container timeline">
  <div class="row">
    <div class="col-xs-12">
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
    </div>
    <div class="col-xs-12">
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
      <div class="row">
        <div class="col-sm-6"><img src="https://via.placeholder.com/900x300/c69/f9c/?text=First" alt=""></div>
        <div class="col-sm-6"><img src="https://via.placeholder.com/900x300/9c6/cf9/?text=Second" alt=""></div>
      </div>
    </div>
    <div class="col-xs-12">
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
    </div>
    <div class="col-xs-12">
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
    </div>
    <div class="col-xs-12">
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
      A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
    </div>
  </div>
</div>

两列图片

当屏幕宽度为:

480px 或更小
从 768px 到 991px

jsfiddle • codepen

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

body {
  background: lightgrey; 
}

.timeline {
  background: white; 
  counter-reset: section;
  margin: 20px auto;
  padding-left: 70px;
  padding-top: 50px;
}

.timeline .col-xs-12 {
  border-left: solid 4px orange;
  padding-bottom: 80px;
  padding-left: 40px;
  padding-right: 60px;
}

.timeline .col-xs-12:before {
  /* counter */
  counter-increment: section;
  content: counter(section);
  /* position */
  position: absolute;
  left: -22px; /* = (width + border-left) / 2 */
  top: -30px;
  /* form & size */
  border-radius: 50%;
  height: 40px;
  width: 40px;
  /* colors & text */
  background: orange;
  color: white;
  font-size: 22px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
}

/* images */
.timeline img {
  margin-top: 20px;
  width: 100%;
}
@media (max-width: 480px) {
  .col-xs-6 {
    width: 100% !important;
  }
}

<div class="container timeline">
  <div class="row">
    <div class="col-sm-6">
      <div class="row">
        <div class="col-xs-12">
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          <div class="row">
            <div class="col-xs-6 col-sm-12 col-md-6"><img src="https://via.placeholder.com/900x300/c69/f9c/?text=First" alt=""></div>
            <div class="col-xs-6 col-sm-12 col-md-6"><img src="https://via.placeholder.com/900x300/9c6/cf9/?text=Second" alt=""></div>
          </div>
        </div>
        <div class="col-xs-12">
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
        </div>
        <div class="col-xs-12">
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
        </div>
        <div class="col-xs-12">
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
        </div>
      </div>
    </div>
      
    <div class="col-sm-6">
      <div class="row">
        <div class="col-xs-12">
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
        </div>
        <div class="col-xs-12">
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          <div class="row">
            <div class="col-xs-6 col-sm-12 col-md-6"><img src="https://via.placeholder.com/900x300/69c/9cf/?text=Three" alt=""></div>
            <div class="col-xs-6 col-sm-12 col-md-6"><img src="https://via.placeholder.com/900x300/96c/c9f/?text=Four" alt=""></div>
          </div>
        </div>
        <div class="col-xs-12">
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
        </div>
        <div class="col-xs-12">
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
        </div>
      </div>
    </div>
  </div>
</div>

关于html - 如何在图标之间创建垂直线(同时使用带有 html 元素的 Bootstrap 列类)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38420349/

文章推荐： c++我在读取二进制文件时得到重复的信息

文章推荐： Java，让JTabbedPane弹出

文章推荐： C++ - 创建几何体

文章推荐： c++ - QVector 写入/调整大小性能

MSSQL监控数据库的DDL操作(创建，修改，删除存储过程，创建，修改，删除表等)
前言：有时候，一个数据库有多个帐号，包括数据库管理员，开发人员，运维支撑人员等，可能有很多帐号都有比较大的权限，例如DDL操作权限(创建，修改，删除存储过程，创建，修改，删除表等），账户多了，管理
javascript - 使用 Storybook 创建 React App 创建 webpack 问题
所以我用 Create React App 创建并设置了一个大型 React 应用程序。最近我们开始使用 Storybook 来处理和创建组件。它很棒。但是，当我们尝试运行或构建应用程序时，我们不断遇
javascript - 创建 Angular Directive(指令)以重用代码 - 创建 html 时解析错误
遵循我正在创建的控件的代码片段。这个控件用在不同的地方，变量也不同。我正在尝试编写指令来清理代码，但在 {{}} 附近插入值时出现解析错误。刚接触 Angular ，无法确定我错过了什么。请帮忙。
java - 创建 JAX-RS 提供程序以从 InputStream 创建 Java Image
我正在尝试创建一个 image/jpeg jax-rs 提供程序类，它为我的基于 post rest 的 Web 服务创建一个图像。我无法制定请求来测试以下内容，最简单的测试方法是什么？ @POST
c - 当我使用 FILE 创建 txt 文件时，Dev C++ 创建 test.txt
我一直在 Windows 10 的模拟器中练习 c。后来我改用dev C++ IDE。当我在 C 中使用 FILE 时。创建的文件的名称为 test.txt ，而我给出了其他名称。请帮助解决它。下面
ios - 为什么我们不遵循使用 xib 创建 customTableViewCell 的相同过程，就像使用 xib 创建 customView 一样？
当我们创建自定义 View 时，我们将 View 文件的所有者设置为自定义类，并使用 initWithFrame 或 initWithCode 对其进行实例化。当我们创建 customUITable
创建 Pthreads
我正在尝试为函数 * Producer 创建一个线程，但用于创建线程的行显示错误。我为这句话加了星标，但我无法弄清楚它出了什么问题...... #include #include #include
创建、调用JavaScript对象的方法集锦
今天在做项目时，遇到了需要创建JavaScript对象的情况。所以Bing了一篇老外写的关于3种创建JavaScript对象的文章，看后跟着打了一遍代码。感觉方法挺好的，在这里与大家分享一下。 &
python - 创建 StringToSign
我正在阅读将查询字符串传递给 Amazon 的 S3 以进行身份验证的文档，但似乎无法理解 StringToSign 的创建和使用方式。我正在寻找一个具体示例来说明 (1) 如何构造 String
c# - 创建、不等待和确保任务完成的正确方法
前言:我对 C# 中任务的底层实现不太了解，只了解它们的用法。为我在下面屠宰的任何东西道歉: 对于“我怎样才能开始一项任务但不等待它？”这个问题，我找不到一个好的答案。在 C# 中。更具体地说，即使任
linq - 创建 ILookups
我有一个由一些复杂的表达式生成的 ILookup。假设这是按姓氏查找人。 (在我们简单的世界模型中，姓氏在家庭中是唯一的) ILookup families; 现在我有两个对如何构建感兴趣的查询。首
WIX bundle 创建
我试图创建一个 MSI，其中包含和 exe。在 WIX 中使用了捆绑选项。这样做时出错。有人可以帮我解决这个问题。下面是代码: 错误 error LGH
Yii 创建、更新具有不同字段的表单
在 Yii 中，Create 和 Update 通常使用相同的形式。因此，如果我在创建期间有电子邮件、密码、...other_fields...等字段，但我不想在更新期间专门显示电子邮件和密码字段，但
qt - 创建 QModelIndex
上周我一直在努力创建一个给定一行和一列的 QModelIndex。或者，我会满足于在已经存在的 QModelIndex 中更改 row() 的值。任何帮助，将不胜感激。编辑: QModelInd
C: 创建、传递和访问指向常量字符串的常量指针数组
出于某种原因，这不起作用: const char * str_reset_command = "\r\nReset"; const char * str_config_command = "\r\nC
r - 创建 "other"字段
现在，我有以下由 original.df %.% group_by(Category) %.% tally() %.% arrange(desc(n)) 创建的 data.frame。 DF 5),
vim - 创建〜/.vimrc后错误打开文件
在今天之前，我使用/etc/vim/vimrc来配置我的vim设置。今天，我想到了创建.vimrc文件。所以，我用 touch .vimrc cat /etc/vim/vimrc > .vimrc 所
iPhone:创建 MKAnnotation
我可以创建一个 MKAnnotation，还是只读的？我有坐标，但我发现使用 setCooperative 手动创建 MKAnnotation 并不容易。想法？最佳答案 MKAnnotation
iphone - 创建 NSDictionary
在以下代码中，第一个日志语句按预期显示小数，但第二个日志语句记录 NULL。我做错了什么？ NSDictionary *entry = [[NSDictionary alloc] initWithOb
php - 创建/添加多维数组值时的未定义偏移
我正在使用与此类似的代码动态添加到数组； $arrayF[$f+1][$y][$x+1] = $value+1; 但是我在错误报告中收到了这个: undefined offset :1 问题:尝试创

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何在图标之间创建垂直线(同时使用带有 html 元素的 Bootstrap 列类)

一栏图片

两列图片