Question

我正在创建一个带引导程序的站点，虽然大多数都是响应式的，但是当屏幕尺寸减小时，有一些元素会变得混乱。你能告诉我如何纠正这个问题吗？

这里是大屏幕中元素的样子。

这就是小屏幕上的样子

有没有办法使元素即使在小屏幕上也能保持相同的位置？我应该在小屏幕上看到任何其他想法吗？

这是代码链接 - 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）从max-height删除.usediv 影响： div将会更长＆＃34;。
Check the output here

2）将overflow:auto;添加到.usediv 影响： div仍然会显示它的最大高度，右侧的滚动会显示给用户，但是图像会因为它不会< em>外面 div就像现在一样 Check the output here

<小时/> 或者您可以使用bootstrap的媒体查询创建一个特殊的CSS：
@media(max-width:480px){}
@media(min-width:800px){}

当然，你可以使用你需要的任何宽度，你可以在你的CSS中创建超过1。因此，您的主要风格不会被搞砸，对于较小的空间，您可以选择其他方式来显示内容，无论是使用溢出还是增加div的高度。

Answer 2

您已指定尺寸，以像素为单位。尝试尽可能使用％来表示它们您可以使用auto作为绿色框的高度。绿色框会根据文字的长度调整它的高度。

网站在小屏幕上搞砸了

2 个答案: