如何在两个容器之间建立连接？答案

【问题标题】：How to create connection between two containers?如何在两个容器之间建立连接？
【发布时间】：2020-03-02 19:57:49
【问题描述】：

我正在尝试创建这个组件。这里的问题是两个容器之间的连接。它是一种用户注册表单。有 4 个部分，每个部分在其右侧打开自己的窗口。问题是它们之间的空白。我正在为这部分寻找 CSS 解决方案

我正在反应中创建这个项目。动态组件解决方案将是完美的。我愿意接受任何建议

【问题讨论】：

我要尝试的第一件事是使用 2 个圆圈，其边框的 1/4 绝对位于“步骤”按钮
如果您只使用图片，这将容易得多。
你正试图让它像台阶一样，对吧？用户将首先输入个人信息，然后单击下一步，它将自动打开第二步，依此类推。你能详细解释一下吗？因此，我们可能会帮助您解决这个问题。
使用 :after 应该很容易。但是您的问题缺少代码。
请添加您的代码，我可以帮助您

【解决方案1】：

试试这个。我在这里使用了引导程序

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" 
 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
 </script>
<script 
 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> 
</script>
 <style>
    a:hover,a:focus{
    text-decoration: none;
     outline: none;
     }
    .vertical-tab{
      font-family: 'Signika', sans-serif;
      display: table;
     }
    .vertical-tab .nav-tabs{
      display: table-cell;
      width: 28%;
      min-width: 28%;
       vertical-align: top;
       border: none;
      }
    .vertical-tab .nav-tabs li{
    float: none;
   vertical-align: top;
    }
   .vertical-tab .nav-tabs li a{
     color: #fff;
     background-color: #444;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
     text-align: center;
     text-transform: uppercase;
     padding: 14px 18px 12px;
     margin: 0 0 10px 0;
     border-radius: 5px 0 0 20px;
    border: none;
    position: relative;
     z-index: 1;
     transition: all 0.5s ease 0s;
     }
    .vertical-tab .nav-tabs li a:hover,
    .vertical-tab .nav-tabs li.active a,
    .vertical-tab .nav-tabs li.active a:hover{
color: #fff;
background-color: #2e86de;
text-shadow: 3px 3px 0 rgba(0,0,0,0.2);
border: none;
 }
.vertical-tab .nav-tabs li a:before,
.vertical-tab .nav-tabs li a:after{
content: '';
background: #fff;
height: 100%;
width: 0;
position: absolute;
left: 0;
top: 0;
z-index: -1;
transition: all 0.3s ease;
 }
.vertical-tab .nav-tabs li a:after{
left: auto;
right: 0;
} 
.vertical-tab .nav-tabs li a:hover:before,
.vertical-tab .nav-tabs li.active a:before,
.vertical-tab .nav-tabs li a:hover:after,
.vertical-tab .nav-tabs li.active a:after{
width: 100%;
opacity: 0;
}
.vertical-tab .tab-content{
color: #fff;
background: #2e86de;
font-size: 15px;
letter-spacing: 1px;
line-height: 25px;
padding: 12px 15px 12px 25px;
border-radius: 0 20px 20px 5px;
display: table-cell;
position: relative;
}
.vertical-tab .tab-content h3{
font-weight: 600;
margin: 0 0 5px 0;
}
@media only screen and (max-width: 479px){
.vertical-tab .nav-tabs{
    width: 100%;
    display: block;
    border: none;
}
.vertical-tab .nav-tabs li a{
    padding: 14px 20px 12px;
    margin: 0 0 13px;
    border-radius: 5px 20px;
}
.vertical-tab .tab-content{
    padding: 20px 15px 10px;
    border-radius: 5px 20px;
    display: block;
}
.vertical-tab .tab-content h3{ font-size: 18px; }
 }
JavaScript (Vertical Tab depend on jQuery and Bootstrap.)
1
2
<script type="text/javascript" src="https://code.jquery.com/jquery- 
1.12.0.min.js"></script>
 <script 
 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
  integrity="sha384- 
  0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
 crossorigin="anonymous"></script>
  License Terms

  </style>
   </head>
 <body>
  <div class="container">
    <div class="row">
    <div class="col-md-6">
        <div class="vertical-tab" role="tabpanel">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#Section1" 
     aria-controls="home" role="tab" data-toggle="tab">Section 1</a></li>
                <li role="presentation"><a href="#Section2" aria- 
    controls="profile" role="tab" data-toggle="tab">Section 2</a></li>
                <li role="presentation"><a href="#Section3" aria- 
   controls="messages" role="tab" data-toggle="tab">Section 3</a></li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content tabs">
                <div role="tabpanel" class="tab-pane fade in active" 
    id="Section1">
                    <h3>Section 1</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 
   elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, 
    vitae consequat nisi justo in tortor. Proin accumsan felis ac felis 
    dapibus, non iaculis mi varius, mi eros viverra massa.</p>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="Section2">
                    <h3>Section 2</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 
    elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, 
     vitae consequat nisi justo in tortor. Proin accumsan felis ac felis 
      dapibus, non iaculis mi varius, mi eros viverra massa.</p>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="Section3">
                    <h3>Section 3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 
      elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, 
       vitae consequat nisi justo in tortor. Proin accumsan felis ac felis 
      dapibus, non iaculis mi varius, mi eros viverra massa.</p>
                </div>
            </div>
        </div>
    </div>
    </div>
  </div>
  </body>
   </html>

【讨论】：