Bootstrap 4 центральных элемента только в маленьком окне просмотра, но нет выравнивания на любом другом размере? - PullRequest
Новая
       53

Bootstrap 4 центральных элемента только в маленьком окне просмотра, но нет выравнивания на любом другом размере?

0 голосов
/ 04 июля 2019

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

Я пытался использовать text-center и text-sm-center, но это противоположно тому, что я хочу (применимо к наименьшему окну просмотра ивсе больше, тогда как я хочу, чтобы это относилось к самым маленьким, но не к чему-либо еще).Есть ли способ сделать это?Я включил скриншоты того, как я хочу, чтобы это выглядело. 

    <section class="container" id="game">
        <div class="row">
          <div class="col-12 col-md-6" id="tic">
            <canvas id="square1" width="100" height="100"></canvas>
            <canvas id="square2" width="100" height="100"></canvas>
            <canvas id="square3" width="100" height="100"></canvas><br />

            <canvas id="square4" width="100" height="100"></canvas>
            <canvas id="square5" width="100" height="100"></canvas>
            <canvas id="square6" width="100" height="100"></canvas><br />

            <canvas id="square7" width="100" height="100"></canvas>
            <canvas id="square8" width="100" height="100"></canvas>
            <canvas id="square9" width="100" height="100"></canvas>

          </div>
          <div class="col-md-6" id="rules">
            <h2>RULES</h2>
            /* list of rules */
          </div>
        </div>

        <div class="row">
            <div class="col-6">
                <button id="undo" type="button" class="btn btn-lg btn-warning">Undo Move</button>
            </div>  
            <div class="col-6">
                <button id="new" type="button" class="btn btn-lg btn-info">New Game</button>
            </div>
        </div>

Вот так это выглядит без выравнивания на большом окне просмотра enter image description here

, нокогда он доберется до самого маленького видового экрана, я хочу, чтобы тик-тэк на борт и две кнопки выровнялись

enter image description here

1 Ответ

1 голос
/ 04 июля 2019

text-center означает, что весь текст будет центрирован, text-sm-center будет центрировать текст на маленькой точке обзора и выше, попробуйте использовать text-center и затем text-sm-left.

Это связано с тем, что стиль начальной загрузки класса, такой же, как col-md-12 и т. Д., Работает как медиа-запрос с минимальной шириной, где все, что имеет размер и выше, получает правило css, а не это правило (точка останова). ,

...