QUASAR - Justify-центр и контрольные точки экрана

Question

У меня есть эта проблема, я искал на форуме, но не нашел ничего связанного.

Я пытаюсь использовать justify-center для маленьких экранов и justify-end для больших экранов. Читая документы, я нашел это:

Поэтому я пытался использовать его как justify-sm-center и justify-lg-end, но не смог заставить его работать. Я сделал эту скрипку, чтобы продемонстрировать это:

https://jsfiddle.net/leoprada/3b40vn6g/

<div class="row">
    <p>Class: justify-center applied when BP lg (justify-lg-center) and justify-end on BP sm (justify-sm-end) </p>
    <div class="row col-12 justify-sm-end justify-end-sm justify-lg-center bg-black">
        <div class="col-sm-4 col-lg-6 bg-blue q-py-md text-center">
            col-4
        </div>
        <div class="col-4 bg-green q-py-md text-center">
            Col-4
        </div>
    </div>
</div>

Я действительно не знаю, делаю ли я что-то не так.

(я знаю, как заставить его работать самостоятельно, используя CSS, но я, конечно, предпочел бы использовать предопределенный класс квазаров)

Answer 1

Я не думаю, что точки останова работают на строках (только элементы в строках), поэтому я думаю, что для того, чтобы делать то, что вы хотите, вам придется использовать привязки класса Vue с точками останова или обнаружение платформы .Что-то вроде:

<div class="row">
  <div :class="$q.platform.is.mobile ? 'justify-end' : 'justify-center'"  class="row col-12 bg-black">
    <div class="col-sm-4 col-lg-6 bg-blue q-py-md text-center">
      col-4
    </div>
  </div>
</div>