UPDATE＃

Question

我有一个自举网格布局，如下图所示。文本部分具有以下CSS：

  height:720px;

使用bootstrap img-responsive类将图像插入到列中。

当我重新调整浏览器窗口大小时，所有图像都会缩小并相应地响应，因为它到达平板电脑媒体查询断点，但是文本区域因为它具有已定义的高度而导致问题。

如何使该灰色文本框缩小，就像窗口上的图像重新调整大小一样，但文本仍然可读。我应该使用javascript吗？

UPDATE＃

附件是我当前的网格代码和css，任何建议都会很棒。

CSS / html

.home-row{
background: #e4e4e4;
height:720px;
}


.home-text{
    margin: 0;
padding: 0;
text-indent: 0;
text-align: left;
font-family:HelveticaNeue;
text-transform: none;
text-decoration: none;
color: #000;
font-size: 1.9em;
letter-spacing: normal;

 }


  <div class="row">
   <div class="col-sx-6 col-md-6 col-sm-12 col-lg-6 main-txt home-row">
    <p class="home-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce                                  tincidunt dignissim nisi gravida dapibus. Vivamus mollis magna vel lacus pretium scelerisque. Nunc a nibh in nisi pharetra rutrum sit amet vel massa. Pellentesque molestie ex neque, 
      </p>
      <p>
        <br>
      </p>
      <p class="home-text">
      sed commodo nisi condimentum nec. Nam fermentum libero sed pretium    scelerisque. Ut risus augue, fringilla maximus dui eget, malesuada laoreet    velit. Fusce sit amet tellus       lorem. Interdum
      </p>
      <p>
        <br>
      </p>
      <p class="home-text">
   Cras interdum tortor id enim fermentum scelerisque. Praesent viverra       ante at pharetra elementum. 

      </p>
      <p>
        <br>
      </p>
      <p class="home-text">
       Donec id mauris elementum, tincidunt ipsum nec, consectetur erat. Ut       nec erat et neque scelerisque fringilla. Sed sodales sem a arcu volutpat maximus     ac eget quam. In.
      </p>
      <p>
        <br>
      </p>
      <p class="home-text">
      . Praesent viverra ante at pharetra elementum. 
         <br>

      </p>

</div>

  <div class="col-sm-6 col-sx-6 col-md-3 col-lg-3 no-pad">
         <img src="img/panel-blue.png" class="img-responsive">
  </div>
 <div class="col-sm-6 col-sx-6 col-md-3 col-lg-3  no-pad">
     <img src="img/light-house.png" class="img-responsive">
  </div>
   <div class="col-sm-12 col-md-6 .col-md-offset-6 no-pad">
     <img src="img/panel-staff.png" class="img-responsive">
   </div>
    </div>
   <div class="row">
   <div class="col-sm-12 col-md-6 no-pad">
    <div class="col-sx-6 col-sm-6 col-md-6 no-pad">
   <img src="img/pannel-tall.png" class="img-responsive">
    </div>

    <div class="col-sx-6 col-sm-6 col-md-6 no-pad">
  <img src="img/panel-red-img.png" class="img-responsive">
    </div>

    <div class="col-sx-6 col-sm-6 col-md-6 no-pad">
    <img src="img/pannel-compas-smal.png" class="img-responsive">

    </div>
   </div>

   <div class="col-md-6 col-sm-12 no-pad">
  <img src="img/panel-large.png" class="img-responsive">

   </div>

  </div>

Answer 1

更改身高：720px;到

height:50%;

我没有你的代码所以我看不出你如何设计布局，但是将高度从设置px改为屏幕的百分比应该可以解决问题。

使用响应式bootsrap图像网格和文本调整窗口大小

UPDATE＃

CSS / html

1 个答案: