使用引导程序将响应水平时间线转换为垂直时间线 [英] Responsive horizontal timeline into vertical timeline with bootstrap

查看：38
本文介绍了使用引导程序将响应水平时间线转换为垂直时间线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试过查找这样的教程/示例/代码笔，但没有成功.请链接到我可能错过的任何内容.

我正在尝试将此图像制作成 html/css/Bootstrap，这应该不会太糟糕，除了垂直线可能很困难(可以就此使用建议):

然后当您更改浏览器的大小或在智能手机上纵向查看时，我希望它看起来更像:

但是我不知道怎么做才能让水平时间线上相互对应的圆圈和标题在垂直时间线上也在一起.

非常感谢您的帮助！非常感谢基本的代码笔！

解决方案

试试这个

.Img1{边距顶部:30px;位置:相对；}.img1:之前{内容: "";位置:绝对；左:0；右:0；高度:21px；宽度:1px；背景:红色；边距:0 自动；顶部:-26px；}.img1 img{width:100%;border-radius:50%;width:100px;高度:100 像素；}.Text2{宽度:200px；}.img2{底边距:30px；位置:相对；}.img2:之前{内容: "";位置:绝对；左:0；右:0；高度:21px；宽度:1px；背景:红色；边距:0 自动；底部:-26px；}.img2 img{width:100%;border-radius:50%;width:100px;高度:100 像素；}.容器 {向左飘浮;边距:0 10px；文字对齐:居中；}@media 屏幕和(最大宽度:767px){.容器 {浮动:无；清楚:两者；边距:20px 0;}.container:after { content: "\00A0";显示:块；清楚:两者；可见性:隐藏；行高:0；高度:0;}.container{ 显示:内联块；}html[xmlns] .container { 显示:块；}* html .container{ 高度:1%;}.container {显示:块}.文本1 {浮动:对；边距:30px 0;}.img1 {向左飘浮;边距顶部:0;}.Text2 {向左飘浮;边距:30px 0;}.img2 {浮动:对；底边距:30px；}.wrapper{width:60%;margin:0 auto;}.Img2:before,.Img1:before{display:none;}}

<div class="容器"><div class="Text1">想法形成
<div class="Img1"><img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png">

<div class="容器"><div class="Img2"><img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png">

<div class="Text2">原型筹集的私人资金

现在我已经使用了图像，但是您可以创建一个 div 而不是图像.我刚刚创建了结构，您需要修改此代码.

I've tried looking up tutorials/examples/codepens like this but wasn't successful. Please link to any I might have missed.

I'm trying to make this image into html/css/Bootstrap, which shouldn't be so bad, except the vertical line might be a difficult (could use advice on this):

And then when you're changing the size of your browser or looking at it on portrait on a smartphone, I want it to look more like:

But I don't know how to go about doing this so that the circle and caption that correspond to each other in the horizontal timeline are also together on the vertical timeline.

Thank you so much for your help! Basic codepens would be super appreciated!

解决方案

Try This

.Img1{
 margin-top:30px;
 position:relative;
}
.Img1:before{
      content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 21px;
    width: 1px;
    background: red;
    margin: 0 auto;
    top: -26px;
}
.Img1 img{width:100%;border-radius:50%;width:100px;
  height:100px;}
  
  .Text2{
  width:200px;
}

.Img2{
 margin-bottom:30px;
 position:relative;
}
.Img2:before{
      content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 21px;
    width: 1px;
    background: red;
    margin: 0 auto;
    bottom: -26px;
}
.Img2 img{width:100%;border-radius:50%;width:100px;
  height:100px;}
.container {
    float: left;
    margin: 0 10px;
    text-align:center;
}

@media screen and (max-width: 767px) {
  .container {
    float: none;
    clear: both;
    margin:20px 0;
}
.container:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.container{ display: inline-block;}
html[xmlns] .container { display: block;}
* html .container{ height: 1%;}
.container {display: block}
.Text1 {
    float: right;
    margin:30px 0;
}
.Img1 {
    float: left;
    margin-top:0;
    
}


.Text2 {
    float: left;
    margin:30px 0;
}
.Img2 {
    float: right;
    margin-bottom:30px;
}
.wrapper{width:60%;margin:0 auto;}
.Img2:before,.Img1:before{display:none;}
}

<div class="wrapper">
<div class="container">
<div class="Text1">
Idea formed
</div>
<div class="Img1">
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png">
</div>
</div>
<div class="container">
<div class="Img2">
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png">
</div>
<div class="Text2">
Private funding for prototype raise
</div>
</div>
</div>

Right now I have used image but you can create a div instead of image. And I have just created structure you need to modify this code.

这篇关于使用引导程序将响应水平时间线转换为垂直时间线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆