Question

使用bootstrap（3.3.6。）和twig（1.24.0）有一种方法可以为某些树枝变量设置不同的值，具体取决于目前的设备？我想像

这样的东西

<div class="visible-xs">{% set images_in_1_row = 1 %}</div>
<div class="visible-sm">{% set images_in_1_row = 2 %}</div>
<div class="visible-md">{% set images_in_1_row = 3 %}</div>
<div class="visible-lg">{% set images_in_1_row = 4 %}</div>

如果当前设备是ipad，我认为images_in_1_row的值为“2”，但不是“4”......

谢谢！

Answer 1

您应该如何使用CSS：

执行此操作

			* {
				margin : 0;
				padding : 0;
			}
			#container {
				width : 1000px;
				background : #DFF2BF;
				min-height : 100vh;
				border-left : 1px solid #4f8a10;
				border-right : 1px solid #4f8a10;
				margin: 0 auto;
			}
			.clear {
				clear : both;
			}
			ul {
				list-style : none;
				padding : 25px;
			}
			
			ul li {
				width :300px;
				margin : 0 25px 25px 0;
				float : left;
			}
			ul li img {
				width: 100%;
			}
			ul li:nth-of-type(3n) {
				margin-right: 0;
			}
			@media only screen and (min-width: 768px) and (max-width: 999px) {
				#container {
					width : 768px;
				}
				ul li {
					width: 345px;
				}
				ul li:nth-of-type(2n) {
					margin-right: 0;
				}
				ul li:nth-of-type(2n+1) {
					margin-right : 25px;
				}
			}

			@media only screen and (min-width: 480px) and (max-width: 767px) {
				#container {
					width : 480px;
				}
				ul li {
					width : 430px;
					margin-right 0;
				}
			}

			@media only screen and (max-width: 479px) {
				#container {
					width : 320px;
				}
				ul li {
					width : 280px;
					margin-right 0;
				}
			}

<!DOCTYPE html>
<html>
	<head>
      <title>Mediaqueries Gallery</title>
	</head>
	<body>
		<div id="container">
			<ul>
				<li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
				<li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
				<li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
				<li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
				<li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
				<li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
				<li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
				<li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
				<li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
				<li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
				<li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
			</ul>
			<div class="clear"></div>
		</div>
	</body>
</html>

根据当前设备设置树枝值

1 个答案: