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-center
e, text-sm-center
mas 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
mas quando chegar à menor janela de visualização, quero que o tic tac para embarcar e dois botões para alinhar
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.
deixe-me dizer algumas palavras