将页面调整为小窗口时，页面无响应

Question

我使用Bootstrap使我的页面具有响应性。 如果窗口很大。它很好，如第一张图片所示。 ） 欢迎辞和三个街区定位良好。

当我将窗口缩小时，欢迎消息中的文本将在块下面。然后，最后一个块的位置向下移动，如第二个图像所示。

显示了欢迎消息和块的CSS。

.blocks {
  display: block;
  margin: 0 auto;
  width: 75%;
  height: 300px; 
}

.box1, .box2, .box3 {
    width: 33.333%;
    height: 250px;
    vertical-align: top;
    display: inline-block;
    zoom: 1;
    /* padding: 25px; */ 
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}


.welcome{
text-align: center;
color: #00ff00;
height: 150px;
width: 50%;
margin: auto;

}

我的HTML

<div class = "container-fluid  carousel_pos" style="overflow-y: auto">   
  <div class="row"> 
    <div id="awesome-carousel" class="carousel slide" data-ride="carousel">


    </div>
  </div>
  <div class="row welcome">
    <h1>Welcome to ######Tourism</h1>
    <p>Wwer eree ere ae llji er we lkjj ewer  jlkjkj erw jkljer lkjkje werewer wkerkjkl. We reakl lkjle aere ar akljiu are jearear lkljkjare. Jk are lkjklul kljrea elkjare lj. He ioierwer sdfsdf sdfeiuit kare adfkjkjl. Wer kjljser sejrlj ekrjkjsfiu ekrjlkejk.</p>
   </div>

    <div class="blocks">
      <div class="col-sm-4 box1" style="background-color:lavender;">.col-sm-4</div>
      <div class="col-sm-4 box2" style="background-color:lavenderblush;">.col-sm-4</div>
      <div class="col-sm-4 box3" style="background-color:lavender;">.col-sm-4</div>
    </div>
</div>

编辑：

Answer 1

第一次必须添加课程＆＃34; row＆＃34;在div中使用class＆＃34; blocks＆＃34;。第二次，如果你使用bootstrap，你可以从＆＃34; box1＆＃34;，＆＃34; box2＆＃34;中删除宽度。和＆＃34; box3＆＃34;，因为你可以替换＆＃34; col-sm-4＆＃34;与＆＃34; col-xs-4＆＃34;。

这是一个例子：

HTML：

<div class="row blocks">
  <div class="col-xs-4 box1" style="background-color:lavender;">.col-sm-4</div>
  <div class="col-xs-4 box2" style="background-color:lavenderblush;">.col-sm-4</div>
  <div class="col-xs-4 box3" style="background-color:lavender;">.col-sm-4</div>
</div>

CSS：

.box1, .box2, .box3 {
height: 250px;
vertical-align: top;
display: inline-block;
zoom: 1;
/* padding: 25px; */}

测试此解决方案。

再见！

Answer 2

您正在设置固定height到.welcome，因此当窗口较小时，.welcome的{​​{1}}为height。摆脱150px中的height: 150px;，它会起作用。查看有效的代码https://jsfiddle.net/o4dmrk4m/1/

Answer 3

使用width: 33.333%;重新调整宽度大小使用此属性或bootstrap列。我宁愿只使用bootstrap类来确定行宽。

我会用这样的东西：

<div class="row col-sm-offset-1 col-sm-10">
  <div class="col-sm-4 " style="background-color:lavender;">.col-sm-4</div>
  <div class="col-sm-4 " style="background-color:lavenderblush;">.col-sm-4</div>
  <div class="col-sm-4 " style="background-color:lavender;">.col-sm-4</div>
</div>