响应式设计引导
响应式设计引导
提问于 2017-03-04 23:33:37
我必须认识到这一点
有背景的3栏和进入栏2的div :一个用于png (il box - classi - open gym)，一个用于文本！
当更改分辨率更改所有元素时，我遇到响应情况的问题！
这是我的代码：
<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等有不同的类，但问题是
回答 1
Stack Overflow用户
发布于 2017-03-05 00:15:06
由于您想要对所有屏幕大小都有响应能力，并且想要在所有屏幕大小上实现相同的布局，因此您必须使用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
希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42597785
复制相关文章
相似问题
腾讯云开发者
