Question

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

我正在使用bootstrap框架，并编写了以下代码来实现相同的功能。

＆＃13;

<!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>

＆＃13;

我无法获得两个图标之间的界限。但是，当我使用没有列类的div元素时，它工作得很好。但是，我建议使用带有bootstrap框架的列类。我将如何实现同样的目标？

Answer 1

我使用了带有彩色左边框和伪元素的简单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="//placehold.it/900x300/c69/f9c/?text=First" alt=""></div>
        <div class="col-sm-6"><img src="//placehold.it/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="//placehold.it/900x300/c69/f9c/?text=First" alt=""></div>
            <div class="col-xs-6 col-sm-12 col-md-6"><img src="//placehold.it/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="//placehold.it/900x300/69c/9cf/?text=Three" alt=""></div>
            <div class="col-xs-6 col-sm-12 col-md-6"><img src="//placehold.it/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元素的bootstrap列类时）

1 个答案:

带图像的一列

带有图像的两列