网站在小屏幕上变得混乱

Question

我正在用bootstrap做一个网站，虽然大多数都是响应式的，但当屏幕尺寸减小时，有一些元素会变得有点混乱。你能告诉我怎么纠正这个问题吗？

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

​

这是它在小屏幕上的样子

​

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

下面是codepen链接- 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)在.usediv中添加overflow:auto;。

的影响：的div将仍然有它的最大高度和滚动在右侧将出现给用户，但图像将会有一点混乱，因为它不会像现在的div。

Check the output here

或者您可以使用bootstrap的media queries创建一个特殊的css：

@media(max-width:480px){}

@media(min-width:800px){}

​

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

Answer 2

您已经以像素为单位指定了尺寸。尽可能使用%来表示它们。

你可以使用auto作为绿色方框的高度。绿色框将根据文本的长度调整其高度。