Bootstrap 4 itens centrais apenas em viewport pequena, mas nenhum alinhamento em todos os outros tamanhos?

Emily

Eu sou novo no Bootstrap, então não tenho certeza se isso é possível, mas estou tentando fazer com que alguns botões e um tabuleiro do jogo da velha não tenham alinhamento (do jeito que estão) em todas as janelas de visualização tamanhos, mas uma vez que atinge o pequeno, eles são centralizados.

Eu tentei usar text-centere, text-sm-centermas ele faz o oposto do que eu quero (aplica-se à menor janela de visualização e tudo maior, enquanto eu quero que seja aplicado à menor, mas nada mais). Existe uma maneira de fazer isso? Incluí capturas de tela de como quero que fique.

    <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>

É assim que fica sem alinhamento em uma janela de visualização maior insira a descrição da imagem aqui

mas quando chegar à menor janela de visualização, quero que o tic tac para embarcar e dois botões para alinhar

insira a descrição da imagem aqui

impossível

text-center significa que todo o texto será centralizado, text-sm-center irá centralizar o texto no ponto de vista pequeno e acima, tente usar text-center e então text-sm-left.

Isso ocorre por causa desse estilo de classe de bootstrap, o mesmo que col-md-12 etc funciona como uma consulta de mídia com largura mínima, onde tudo desse tamanho e acima é atribuído à regra css, não apenas àquela regra (ponto de interrupção).

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

Interage com todos os outros itens em uma matriz, mas apenas de uma maneira?

Recolher bootstrap 4, fechar todos os outros itens recolhíveis

Acesse todos os outros itens em uma matriz - JavaScript

Compare cada item com todos os outros itens em ArrayList

Acesse todos os outros itens em uma matriz - JavaScript

Edite todos os outros itens em uma matriz

Comparar todos os itens em um vetor com todos os outros itens, enquanto exclui alguns elementos?

Ação acontecendo para todos os itens em v-for, mas quero executar a ação apenas no item em que cliquei

HTML e CSS Alinhamento vertical do site em todos os tamanhos de tela

Dimensionar todos os itens em um RecyclerView de apenas TextViews?

Itens centrais verticais no Bootstrap 4

Por que o componente React renderiza apenas um item na matriz uma vez, mas itera em todos os itens?

Bootstrap 4 para ter os itens da barra de navegação sempre expandidos na tela pequena sem nenhum botão

Como substituir apenas 1 Método Http (POST) em um @RestController, mas deixar Spring lidar com todos os outros métodos Http com uma resposta HATEOAS padrão

Como aplico o filtro em todos os itens paginados e exibo apenas os itens filtrados?

Alinhamento do botão de alternância (ícone humberger) na visualização em tela pequena usando bootstrap 4

Como fazer meu aplicativo caber em todos os tamanhos de iPhone apenas no modo retrato

Soquete bruto parece obter todos os pacotes em alguns casos, mas não em outros

Um problema quando clico no botão de edição, todos os outros elementos ouvem o clique, mas eu preciso apenas daquele em que clico

Como faço para comparar idiomaticamente cada item em uma lista com todos os outros itens?

Usando o mapa em todos os outros itens da lista Python

como comparar o item com todos os outros itens usando forEach em Kotlin?

Armazenamento local em JavaScript excluindo todos os itens em vez de apenas um

Minha barra de navegação de topo fixo do Bootstrap não mostrará todos os itens suspensos ao visualizar em uma janela pequena ou em um dispositivo móvel

Bootstrap pull-right trabalhando apenas em largura pequena

SQLAlachmey: filtro ORM para corresponder a todos os itens em uma lista, nenhum

O aplicativo travou devido a NullPointerException em um método, mas trabalhando em todos os outros métodos da mesma classe

Links no BxSlider não funcionam no Google Chrome, mas funcionam em todos os outros navegadores

PDF JavaScript não funciona no Adobe Reader DC, mas em todos os outros leitores

TOP lista

quentelabel

Arquivo