自適應設計引導

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

我會盡力的！感謝那一刻！ –

自適應設計引導

回答

相關問題