我正在设计一个网站，我有两个引导行。在小屏幕和xs屏幕尺寸上，内容开始重叠。
这是一个显示问题的最小示例： JSFiddle
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class='container-fluid impact-main-container'>
<div class='row'>
<div id='impact-header-main-col' class='col-xs-12 col-sm-12 col-md-7 impact-header-col impact-header-col1'>
<h1 class='mobile-only impact-main-header'>Content</h1>
<h2 class='impact-header'>
Some paragraph content goes here Some paragraph content goes hereSome paragraph content goes hereSome paragraph content goes here
</h2>
<p class='paragraph-normal-size body-p'>
Some paragraph content goes hereSome paragraph content goes hereSome paragraph content goes hereSome paragraph content goes here
</p>
</div>
</div>
<div class='row'>
<div class='col-xs-6 col-sm-6 col-md-3 col-lg-3 impact-stats-children-col impact-header-col'>
<div class='principles-box'>
<p class='paragraph-normal-size'><span class='HeleveticaLt'>Content<br></span> <span class='HeleveticaHv'>Content Content</span></p>
</div>
<div class='principles-box'>
<p class='paragraph-normal-size'><span class='HeleveticaLt'>Content<br></span> <span class='HeleveticaHv'>Content Content</span></p>
</div>
<button class='btn get-facts'>Content Content Content <i class='fa fa-caret-right' aria-hidden='true'></i></button>
</div>
<div class='col-xs-6 col-sm-6 col-md-3 col-lg-3 impact-stats-children-right impact-stats-children-col'>
<div class='principles-box'>
<p class='paragraph-normal-size'><span class='HeleveticaLt'>Content Content<br></span> <span class='HeleveticaHv'>Content</span></p>
</div>
<div class='principles-box'>
<p class='paragraph-normal-size'><span class='HeleveticaLt'>Content Content Content<br></span> <span class='HeleveticaHv'>Content Content</span></p>
</div>
</div>
</div>
</div>
<style type="text/css">
.principles-box {
background: black;
color: #797979;
padding: 15px 23px 15px 14px;
border-left: 9px solid #DCDCDC;
text-align: center;
margin-bottom: 15px;
}
.get-facts {
font-family: 'HelveticaNeueLTStd-Lt';
font-size: 20px;
color: black;
line-height: 27px;
background-color: transparent;
border: 1px solid #979797;
border-radius: 0px;
margin-top: 25px;
display: block;
text-align: left;
black-space: normal;
min-width: 150px;
}
.get-facts:hover {
color: #CCC;
}
/*Phone*/
@media (max-width: 414px) {
.home-header-col {
padding-left: 15px;
}
.mobile-bg {
/*background-position-y: 59px;*/
}
}
/*xs phones*/
@media (max-width: 320px) {
.impact-stats-children-col {
padding-left: 5px;
padding-right: 5px;
}
}
.desktop-only {
display: block;
}
.mobile-only {
display: none;
}
/*Phone and landscape tablet*/
@media (max-width: 991px) {
.home-header-col {
top: 90px;
position: absolute;
padding: 0px 15px 0px 15px;
}
.desktop-only {
display: none;
}
.mobile-only {
display: block;
}
.offset-col {
left: 0px;
}
.fixed-header-logo {
text-align: center;
}
#logo {
padding: 10 0 10 0px;
}
.impact-stats-children {
padding: 5px 5px 5px 5px;
min-width: 114px;
}
.impact-main-header {
font-family: 'HelveticaNeueLTStd-Md', Arial, sans-serif;
/*font-size: 45px;*/
color: black;
padding-bottom: 12px;
border-bottom: 1px solid black;
margin-top: 0px;
}
.impact-main-container {
position: static;
}
.impact-header-col {
margin-left: 0px;
}
.impact-header-col1 {
left: 0px;
top: 103px;
}
}
.hidden {
display: none!important;
}
.verticallyCenter {
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* Calc function for Responsice font size:
calc(minFontSize px) + (minFontSize-maxFontSize) * (100vh - minScreenWidth)/(maxScreenWidth - minScreenWidth))
*/
h1 {
font-size: calc(30px + (65 - 30) * (100vw - 400px)/(1500 - 400))!important;
}
h1.impact {
font-size: calc(60px + (60 - 60) * (100vw - 400px)/(1500 - 400))!important;
}
h2 {
font-size: calc(25px + (50 - 25) * (100vw - 400px)/(1500 - 400))!important;
line-height: calc(30px + (55 - 30) * (100vw - 400px)/(1500 - 400))!important;
}
p.paragraph-normal-size {
font-size: calc(19px + (24 - 19) * (100vw - 400px)/(1500 - 400))!important;
line-height: calc(26px + (31 - 26) * (100vw - 400px)/(1500 - 400))!important;
}
p.paragraph-smaller {
font-size: calc(15px + (20 - 15) * (100vw - 400px)/(1500 - 400))!important;
}
p.paragraph-smallest {
font-size: calc(13px + (15 - 13) * (100vw - 400px)/(1500 - 400))!important;
}
@media(min-width: 1500px){
h1 {
font-size: 65px!important;
}
h1.impact {
font-size: 60px !important
}
h2 {
font-size: 50px !important;
line-height: 55px !important;
}
p.paragraph-normal-size {
font-size: 24px !important;
line-height: 31px !important;
}
p.paragraph-smaller {
font-size: 20px!important;
}
p.paragraph-smallest {
font-size: 15px !important;
}
}
@media(max-width: 400px){
h1 {
font-size: 30px !important;
}
h1.impact {
font-size: 60px !important
}
p.paragraph-normal-size {
font-size: 19px !important;
line-height: 26px !important;
}
p.paragraph-smaller {
font-size: 15px !important;
}
p.paragraph-smallest {
font-size: 13px !important;
}
}
/*xs phones*/
@media (max-width: 320px) {
.home-header {
font-size: 25px !important;
}
}
.HeleveticaLt {
font-family: 'HelveticaNeueLTStd-Lt';
}
.HelvetivaMd {
font-family: 'HelveticaNeueLTStd-Md';
}
.HeleticaHv {
font-family: 'HelveticaNeueLTStd-Hv';
}
html{
color:black!important;
}
</style>
在较大的屏幕上一切正常，但是一旦你将屏幕缩小到小或超小，框就会开始与段落重叠。我该如何解决这个问题？
答案 0 :(得分：2)
出现此问题的主要原因是您正在top: 103px;设置.impact-header-col1 @ max-width: 991px断点，这会将其降低103px
请参阅此updated fiddle
答案 1 :(得分：2)
你在css中使用它。
@media (max-width: 991px) {
.impact-header-col1 {
left: 0px;
top: 103px; }
Top会在不调整任何其他内容的情况下拉出下面的部分。而不是使用top，使用
margin-top: 103px