自适应设计引导

3山坳背景，进入第2列格：一个PNG（IL盒 - CLASSI - 开放的健身房），一个文本！

我遇到了响应情况的问题，当更改分辨率更改所有元素时！

这是我的代码：

<div class="row full"> 
     <div class="col-sm-4 box-home nopadding"> 
     <img src="<?php the_field('immagine_il_box'); ?>" class="img-responsive img-box-home"> 

      <div class="title" style="background-image: url('/crossfitpontedera/wp-content/uploads/2017/02/bottone-ilbox.png');"></div> 
      <div class="description" id="descr-one"> 
      <h2><?php the_field('titolo_il_box'); ?></h2> 
      <p><?php the_field('descrizione_il_box'); ?></p> 
      </div> 
     </div> 

     <div class="col-sm-4 box-home" style="background-image: url('<?php the_field('immagine_classi'); ?>');"> 
      <div class="title" style="background-image: url('/crossfitpontedera/wp-content/uploads/2017/02/bottone-classi.png');"></div> 
      <div class="description" id="descr-two"> 
      <h2><?php the_field('titolo_classi'); ?></h2> 
      <p><?php the_field('descrizione_classi'); ?></p> 
      </div> 
     </div> 

     <div class="col-sm-4 box-home" style="background-image: url('<?php the_field('immagine_open_gym'); ?>');"> 
      <div class="title" style="background-image: url('/crossfitpontedera/wp-content/uploads/2017/02/bottone-opengym.png');"></div> 
      <div class="description" id="descr-three"> 
      <h2><?php the_field('titolo_open_gym'); ?></h2> 
      <p><?php the_field('descrizione_open_gym'); ?></p> 
      </div> 
     </div> 
    </div>

OK，有各种类H1和P等，但由于要对所有响应的问题是这样的

problem

来源

2017-03-04 Antonio Carbone

屏幕大小，并且要为所有屏幕大小实现相同的布局，则必须使用class="col-xs-4"。

当您使用class="col-sm-4"时，您将失去768px以下的响应。这就是为什么你遇到这样的问题。

下面是一个例子看看它是如何工作的所有屏幕尺寸

<!DOCTYPE html> 
 
<html> 
 

 

 
<head> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      </head> 
 
<body > 
 
    
 
       <div class="row"> 
 
     <div class="col-xs-4" style="background-color: white; color: black"> 
 
     
 

 
      
 
      <h2>some text</h2> 
 
      <p>some text</p> 
 
      </div> 
 
     
 

 
     <div class="col-xs-4" style="background-color: green; color: blue;"> 
 
      
 
      <h2>some text</h2> 
 
      <p>some text</p> 
 
      </div> 
 
     
 

 
     <div class="col-xs-4" style="background-color: yellow; color: red;"> 
 
      
 
      <h2>some text</h2> 
 
      <p>some text</p> 
 
      </div> 
 
     
 
    </div> 
 
</body> 
 

 
</html>

你想要的布局应该像这样

<!DOCTYPE html> 
 
<html> 
 

 

 
<head> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      </head> 
 
<body > 
 
    <div class="container-fluid"> 
 
       <div class="row"> 
 
     <div class="col-xs-4" style="background-image: url('https://www.w3schools.com/css/trolltunga.jpg'); height: 400px;"> 
 
     <div class="row"> 
 
     <div class="col-xs-4 col-xs-offset-1" style="background-color: white; color: black; height: 100px; "> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-xs-12" style=" height: 100px;"> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-xs-10 col-xs-offset-1" style="background-color: green; color: blue; height: 200px;"> 
 
     </div> 
 
     </div> 
 

 
      </div> 
 
     
 

 
     <div class="col-xs-4" style="background-image: url('https://www.w3schools.com/css/trolltunga.jpg'); height: 400px;"> 
 
     <div class="row"> 
 
     <div class="col-xs-4 col-xs-offset-1" style="background-color: white; color: black; height: 100px; "> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-xs-12" style=" height: 100px;"> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-xs-10 col-xs-offset-1" style="background-color: green; color: blue; height: 200px;"> 
 
     </div> 
 
     </div> 
 

 
      </div> 
 
     
 

 
     <div class="col-xs-4 " style="background-image: url('https://www.w3schools.com/css/trolltunga.jpg'); height: 400px;"> 
 
     <div class="row"> 
 
     <div class="col-xs-4 col-xs-offset-1" style="background-color: white; color: black; height: 100px; "> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-xs-12" style=" height: 100px;"> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-xs-10 col-xs-offset-1" style="background-color: green; color: blue; height: 200px;"> 
 
     </div> 
 
     </div> 
 

 
      </div> 
 
     
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

注意

This is a good place to start learning about bootstrap

希望这有助于！

来源

2017-03-04 16:15:06 neophyte

我会尽力的！感谢那一刻！ –

自适应设计引导

回答

相关问题