html - 网站在小屏幕上乱七八糟

Question

我正在制作一个带有 Bootstrap 的网站，虽然其中大部分都是响应式的，但当屏幕尺寸缩小时，有一些元素会有点困惑。 你能告诉我如何纠正这个问题吗？

这是元素在大屏幕上的样子。

这是它在小屏幕上的样子

有没有办法让元素即使在小屏幕上也保持相同的位置？ 我应该让它在小屏幕上显示的任何其他想法？？

这是代码笔链接 - codepen link

   .container{
    text-align: center;
    width:80%;

}

.first{
    background:rgb(0,30,58);
    color:white;

}
.span1,.span2{
    font-size:36px;
    font-weight:bold;
}
.span1{
color:rgb(72,174,137);
}

[type="text"]{
    border-radius:25px;
    padding-left:5px;
}

[type="submit"]{
    color:white;
    background-color: rgb(72,174,137);
    border-radius:25px;
    position:relative;
    margin-left:-25px;
}
.use{
    max-height:85%;
    margin:0 auto;

}
.usediv{
    border:3px solid rgb(72,174,137);

    padding-left: 10px;
    padding-right: 15px;
    width:80%;
    margin:0 auto;
    max-height:220px;
}
.usediv p{

    margin-top:10px;
}
.usediv img{
  position:relative;
  top:-25px;
}

.box{
 border:3px solid rgb(72,174,137);
 width:55%;
 margin:0 auto;
 max-height:210px;
}
/*
.box .img-responsive{
    margin-top:-20px;
}
*/
.para{
    text-align: left;
    margin-right:0;
    padding-right:0;
    padding-top:15px;
}
.para strong{
    font-weight:900;
    font-size: 16px;
}

.second{
    margin-bottom:30px;
    border:1px solid green;
    width:10%;
}
.threebox{
    width:90%;
    margin:0 auto;
    padding-left:70px;


}
.col-md-4{
    height:40%;
}
.col-md-4 > p{
    background-color:white;
    border:2px solid white;
    border-top-color:green;
    width:200px;
    height:160px;
    box-shadow:10px 10px 15px;

}
.positions{
    margin-top:60px;
    position:relative;
    margin-bottom:-50px;
    z-index: 2;
}

.positions > h1{
    font-size:30px;
    font-weight:bold;


}

.spanf{
    font-size:18px;
    font-weight:bold;
}

.features{
    text-align: center;
    padding-bottom:40px;
    width:100%;
    margin:0 auto;
    background-color:rgb(242,243,245);

    height:1840px;
    z-index:1;
    padding-top:120px;

    border:2px solid red;
}


.features .row{

    width:65%;
    margin:0 auto;
    margin-top:40px;

    padding-top:30px;
    padding-left:20px;
}



.features button{
    border-radius:20px;
}


.features img{
    /*width:98%;
    height:98%;*/

}
/*
.features .row .col-lg-6{

    padding-right:15px;
    padding-left: 2px;
}*/



/*
.img2{
  position:relative;
  left: 12px;
top: -12px;
box-shadow: -2px 2px 9px;

}
.img3{
    position:relative;
    top:-12px;
    left:-12px;
    box-shadow:2px 2px 9px;
}

*/

.imgleft, .imgright{
    border:2px solid rgb(72,174,137);
    margin-bottom: 10px;

}

.imgleft img{
    position:relative;
    top:-15px;
    left:15px;
    box-shadow: 2px 2px 9px;
}

.imgright img{
    position:relative;
    top:-15px;
    left:-15px;
    box-shadow: -2px 2px 9px;
}

.textleft p{
    text-align:left;
}
.textright p{
    text-align: right;
}





.pillars{
    border:2px solid rgb(72,174,137);
    background-color: rgb(72,174,137);
    height:350px;
    margin-top:0;
}

请告知我应该做哪些更改来解决这个问题。

Answer 1

目前我有两种解决方案:

1) 从 .usediv 中移除 max-height。
影响:div会“变长”。
Check the output here

2) 添加overflow:auto;到.usediv.
影响:div 仍将保持其最大高度，并且会向用户显示右侧的滚动条，但图像会有点乱，因为它不会在外面 现在的 div。
Check the output here

---

或者您可以使用 Bootstrap 的媒体查询创建一个特殊的 css:
@media(最大宽度:480 像素){}
@media(min-width:800px){}

当然，您可以使用您需要的任何宽度，并且可以在您的 css 中创建不止 1 个宽度。这样你的主样式就不会乱了，对于较小的空间，你可以选择其他方式来显示内容，无论是使用溢出还是增加 div 的高度。