Css 响应水平时间线-Boostrap 4

我正在努力制定响应性的水平时间表。我正在使用Boostrap4作为时间线和项目。到目前为止，我已经提出了这段代码，它在响应性方面运行良好

timeline.html

<div className="container timeline-container">
                    <div class="intro">
                        <div class="main-heading">
                            <div class="three-col top">
                                <div class="col">
                                    <div class="sub-heading">
                                        <div class="square">
                                            <div class="pic">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="sub-heading">
                                        <div class="square">
                                            <div class="pic">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="sub-heading">
                                        <div class="square">
                                            <div class="pic">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="main-heading">
                            <div class="three-col bottom">
                                <div className="wrapper-bottom">
                                    <div class="col">
                                        <div class="timeline-dot"> 
                                        </div>
                                        <div class="sub-heading">
                                            <div class="square">
                                                <div class="pic">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col">
                                        <div class="timeline-dot"> 
                                        </div>
                                        <div class="sub-heading">
                                            <div class="square">
                                                <div class="pic">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="timeline-dot"> 
                                        </div>
                                        <div class="sub-heading">
                                            <div class="square">
                                                <div class="pic">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

我的时间表如下所示：

@media (min-width: 800px) {
  .pic {
    width: 150px;
    height: 150px;
  }
}

@media (min-width: 1024px) {
  .pic {
    width: 200px;
    height: 200px;
  }
}

@media (min-width: 1200px) {
  .pic {
    width: 250px;
    height: 250px;
  }
}

我想改变两件事：

1） 删除第一个点之前和最后一个点之后的线，使时间轴如下所示

2） 使图片方块具有响应性

我试过让parent

div

像

.sub-heading {
    position: relative;
    display: inline-block;
    padding: 20px 0;
    width: 400px;
    height: 400px;   
}

和图片广场

.square {
    width: 100%;
    height: 100%;
    margin: 25px;
    transform:rotate(45deg);
    overflow: hidden;
 }

但它不起作用。任何建议都将不胜感激。

1）您可以通过css

：：在每个列上的

伪类之后实现这一点。从

.three-col.bottom

中删除边框顶部，并将边框添加到顶部行的每一个

.col

，后面是

：

请注意css：

.three-col.top .col::after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 2px solid #4A4A4A;
}

.three-col.top .col:first-child::after {
  left: 50%;
}

.three-col.top .col:last-child::after {
  right: 50%;
}

2） 移除方形div，您不需要它。同时将.pic样式更改为

.pic {
  background: url(http://placekitten.com/g/150/150);
  width: 60px;
  height: 60px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin: 25px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

对于响应性设计，您需要使用css媒体查询


所以你可以试试这样的东西：

@media (min-width: 800px) {
  .pic {
    width: 150px;
    height: 150px;
  }
}

@media (min-width: 1024px) {
  .pic {
    width: 200px;
    height: 200px;
  }
}

@media (min-width: 1200px) {
  .pic {
    width: 250px;
    height: 250px;
  }
}

完整代码：


.container.timeline-container{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
* {
框大小：边框框；
}
.介绍{
位置：相对位置；
}
.广场{
宽度：100px；
高度：100px；
利润率：25px；
变换：旋转（45度）；
溢出：隐藏；
}
图{
背景：url(http://placekitten.com/g/150/150);
宽度：60px；
高度：60px；
-ms变换：旋转（45度）；
-webkit变换：旋转（45度）；
变换：旋转（45度）；
利润率：25px；
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}
.时间轴点{
宽度：10px；
高度：10px；
边界半径：20px；
保证金：0自动；
背景：#CF4532；
利润上限：-6px；
}
.主标题{
文本对齐：居中；
字体大小：30px；
线高：30px；
位置：相对位置；
}
.三上校：之后{
显示：块；
明确：两者皆有；
内容：''；
}
三柱{
浮动：左；
宽度：33.33%；
位置：相对位置；
填充：0 20px；
}
.小标题{
位置：相对位置；
显示：内联块；
填充：35px0；
}
三列，三列，三列后{
内容：“；
位置：绝对位置；
背景：#000；
显示：块；
左：0；
右：0；
底部：0；
边框底部：2px实心#4A4A4A；
}
第一个孩子：之后{
左：50%；
}
最后一个孩子：：之后{
右：50%；
}
@介质（最小宽度：576px）{
图{
宽度：100px；
高度：100px；
}
}
@介质（最小宽度：800px）{
图{
宽度：150px；
高度：150像素；
}
}
@介质（最小宽度：1024px）{
图{
宽度：200px；
高度：200px；
}
}
@介质（最小宽度：1200px）{
图{
宽度：250px；
高度：250px；
}
}

是的，使用pseudo类确实有效。你知道我该如何解决我问题中的第二个问题，使图片方块具有响应性吗？我已经用上面的代码试过了，但是我的方块形状变松了。在上面的代码中，我试图使父div的宽度和高度固定为400px，而仅应用子div的宽度和高度为100%。但不起作用。你说的“让图片方块有响应”到底是什么意思？我只想让这个图片方块或菱形对所有屏幕都有响应。请提供更多信息，我不明白你的意思。你想改变方块的宽度和高度吗？是否要更改移动设备上的布局？举个例子可能会有所帮助。桌面上的响应看起来很好。好吧，抱歉没有解释清楚。是的，我希望我的图片根据显示的设备大小而定。当我试图通过改变
宽度/高度使它们变大时，形状丢失了。是的，在桌面上是可以的，尽管我希望它们更大，但我不知道如何：/