ブートストラップ（3.3.6）とtwig（1.24.0）を使用すると、現在のデバイス に応じて、いくつかのtwig変数に異なる値を設定する方法がありますか？ 私は現在のデバイスに応じてtwig値を設定する
<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"！
あなたはCSSでこれを行う必要がありますどのようにほんの少しの抜粋：
\t \t \t * {
\t \t \t \t margin : 0;
\t \t \t \t padding : 0;
\t \t \t }
\t \t \t #container {
\t \t \t \t width : 1000px;
\t \t \t \t background : #DFF2BF;
\t \t \t \t min-height : 100vh;
\t \t \t \t border-left : 1px solid #4f8a10;
\t \t \t \t border-right : 1px solid #4f8a10;
\t \t \t \t margin: 0 auto;
\t \t \t }
\t \t \t .clear {
\t \t \t \t clear : both;
\t \t \t }
\t \t \t ul {
\t \t \t \t list-style : none;
\t \t \t \t padding : 25px;
\t \t \t }
\t \t \t
\t \t \t ul li {
\t \t \t \t width :300px;
\t \t \t \t margin : 0 25px 25px 0;
\t \t \t \t float : left;
\t \t \t }
\t \t \t ul li img {
\t \t \t \t width: 100%;
\t \t \t }
\t \t \t ul li:nth-of-type(3n) {
\t \t \t \t margin-right: 0;
\t \t \t }
\t \t \t @media only screen and (min-width: 768px) and (max-width: 999px) {
\t \t \t \t #container {
\t \t \t \t \t width : 768px;
\t \t \t \t }
\t \t \t \t ul li {
\t \t \t \t \t width: 345px;
\t \t \t \t }
\t \t \t \t ul li:nth-of-type(2n) {
\t \t \t \t \t margin-right: 0;
\t \t \t \t }
\t \t \t \t ul li:nth-of-type(2n+1) {
\t \t \t \t \t margin-right : 25px;
\t \t \t \t }
\t \t \t }
\t \t \t @media only screen and (min-width: 480px) and (max-width: 767px) {
\t \t \t \t #container {
\t \t \t \t \t width : 480px;
\t \t \t \t }
\t \t \t \t ul li {
\t \t \t \t \t width : 430px;
\t \t \t \t \t margin-right 0;
\t \t \t \t }
\t \t \t }
\t \t \t @media only screen and (max-width: 479px) {
\t \t \t \t #container {
\t \t \t \t \t width : 320px;
\t \t \t \t }
\t \t \t \t ul li {
\t \t \t \t \t width : 280px;
\t \t \t \t \t margin-right 0;
\t \t \t \t }
\t \t \t }<!DOCTYPE html>
<html>
\t <head>
<title>Mediaqueries Gallery</title>
\t </head>
\t <body>
\t \t <div id="container">
\t \t \t <ul>
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li>
\t \t \t </ul>
\t \t \t <div class="clear"></div>
\t \t </div>
\t </body>
</html>
あなたがiPadや何か他のものを使用している場合、どのように小枝が知っているだろうか？ – Jocelyn
これは小枝ではできません。 TwigはPHPにコンパイルされ、PHPはサーバサイドで解釈されます。あなたがしなければならないことは、メディアクエリを使用して、1つの行にある画像の数を変更することです。 – DarkBee
メディアクエストの使用例を参考にしてください。 – mstdmstd