Question

每当我将我的网站的大小调整为320 x 480的移动视图时，我的两个填充文本的列会相互碰撞并混合文本。我试着在没有列的情况下使用＆＃34; container-clearfix＆＃34;但它并没有解决我的问题。

第一张图片显示了小型手机image 1

的网站文字在320 x 480上的外观

这是JS小提琴：http://jsfiddle.net/52VtD/14124/

＆＃13;

#big-image {
  position: relative;
  z-index: -1;
  width: 100%;
  height: 600px;
  background-repeat: no-repeat;
  background-size: cover;
}
.col-md-12 {
  padding-left: 0px;
  padding-right: 0px;
}
#text-four {
  position: absolute;
  overflow: hidden;
  text-align: center;
  bottom: 450px;
  vertical-align: middle;
  left: 20%;
}
#text-four-p {
  position: absolute;
  overflow: auto;
  bottom: 830%;
  left: 15%;
  text-align: center;
}
.US {
  position: absolute;
  overflow: auto;
  bottom: 250%;
  left: 15%;
  text-align: center;
}
.EU {
  position: absolute;
  overflow: auto;
  bottom: 250%;
  right: 15%;
  text-align: center;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  #text-four,
  #text-four-p {
    display: none;
  }
}

＆＃13;

<div class="row">

  <img src="image/4.jpg" class="img-responsive" id="big-image">


  <div class="col-sm-12">
    <div class="carousel-caption">
      <h3 id="text-four"> HOW TO WATCH SHORTSHD (US) OR SHORTSTV (EUROPE)</h3>
      <p id="text-four-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum lorem. Nullam molestie lectus eros, vel ornare mi</p>
    </div>
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-6">
        <div class="carousel-caption">
          <div class="US">
            <h2> ShortsHD (US)</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at lobortis diam. Nam quis mauris ipsum. Fusce ac felis pharetra, egestas ante ut, malesuada quam. Vestibulum id arcu eget ipsum semper vestibulum. Nullam vitae ipsum tellus.
              Aenean nec sem consequat, mattis dolor eu, eleifend lectus. Nam id purus hendrerit, lacinia massa a, ullamcorper massa. Cras eget risus ut nulla cursus vestibulum. Duis id tellus fringilla, ultricies est id, sagittis velit. Morbi quis ante
              pharetra, tincidunt neque non, ultricies diam. Cras ornare risus vel nisl gravida, non viverra lacus efficitur. Nam consectetur dolor eros, quis iaculis arcu accumsan at. Aenean vitae lectus eros.</p>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-6 col-pull-6">
        <div class="carousel-caption">
          <div class="EU">
            <h2> ShortsTV (EU)</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at lobortis diam. Nam quis mauris ipsum. Fusce ac felis pharetra, egestas ante ut, malesuada quam. Vestibulum id arcu eget ipsum semper vestibulum. Nullam vitae ipsum tellus.
              Aenean nec sem consequat, mattis dolor eu, eleifend lectus. Nam id purus hendrerit, lacinia massa a, ullamcorper massa. Cras eget risus ut nulla cursus vestibulum. Duis id tellus fringilla, ultricies est id, sagittis velit. Morbi quis ante
              pharetra, tincidunt neque non, ultricies diam. Cras ornare risus vel nisl gravida, non viverra lacus efficitur. Nam consectetur dolor eros, quis iaculis arcu accumsan at. Aenean vitae lectus eros.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

更改媒体查询的位置

@media only screen 
     and (min-device-width : 320px) 
     and (max-device-width : 480px) {
    .US{
      position: relative;
      overflow:auto;
      bottom: 250%;
      left: 15%;
      text-align: center;
     }
     .EU{
     position: relative;
     overflow:auto;
     bottom: 250%;
     right: 15%;
     text-align: center;
     }
     }

Answer 2

您在主容器

中的许多元素中使用了position:absolute

相互碰撞并获得相同的位置

创建一个父容器并提供position:absolute并根据您的要求设置子容器

Boostrap列碰撞

2 个答案: