Question

我必须意识到这一点

3 col with background and into col 2 div：one for png（il box - classi - open gym）one for text！

我对响应情况有疑问，当更改分辨率改变所有元素时!!!

这是我的代码：

<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>

好的，h1和p等有各种类，但问题是这个

problem

Answer 1

由于您希望对所有屏幕尺寸都有响应，并且您希望为所有屏幕尺寸实现相同的布局，因此您必须使用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

希望这有帮助！

响应式设计bootstrap

1 个答案: