Existe um conjunto de classes na estrutura de Bootstrap do Twitter que alinha o texto?
Por exemplo, tenho algumas tabelas com $
totais que quero alinhados à direita ...
<th class="align-right">Total</th>
e
<td class="align-right">$1,000,000.00</td>
html
css
twitter-bootstrap
text-align
Mediabeastnz
fonte
fonte
O uso do Bootstrap 3.x
text-right
funciona perfeitamente:fonte
Não, o Bootstrap não tem uma classe para isso, mas esse tipo de classe é considerado uma classe "utilitária", semelhante à classe ".pull-right" mencionada pelo @anton.
Se você olhar para utilities.less, verá muito poucas classes de utilitários no Bootstrap, o motivo é que esse tipo de classe geralmente é desaprovado e recomenda-se que seja usado para: a) prototipagem e desenvolvimento - para que você possa construir rapidamente expanda suas páginas e remova as classes pull-right e pull-left em favor da aplicação de flutuadores para mais classes semânticas ou para os próprios elementos, ou b) quando for claramente mais prático do que uma solução mais semântica.
No seu caso, pela sua pergunta, parece que você deseja alinhar certo texto à direita da sua tabela, mas não todo. Semanticamente, seria melhor fazer algo do tipo (vou criar algumas classes aqui, exceto a classe de inicialização padrão, .table):
E basta aplicar o
text-align: left
outext-align: right
declarações às classes de valor e etiqueta de preço (ou quaisquer classes que funcionem para você).O problema de se aplicar
align-right
como classe é que, se você quiser refatorar suas tabelas, precisará refazer a marcação e os estilos. Se você usar classes semânticas, poderá refatorar apenas o conteúdo CSS. Além disso, se você estiver aplicando um tempo para aplicar uma classe a um elemento, é recomendável tentar atribuir valor semântico a essa classe para facilitar a navegação da marcação para outros programadores (ou você três meses depois).Uma maneira de pensar sobre isso é: quando você coloca a pergunta "Para que serve isso?", Você não receberá esclarecimentos com a resposta "alinhar à direita".
fonte
Bootstrap 2.3 tem classes de utilitários
text-left
,text-right
etext-center
, mas eles não funcionam em células da tabela. Até o lançamento do Bootstrap 3.0 (onde eles corrigiram o problema) e eu posso fazer a troca, adicionei isso ao CSS do meu site que é carregado apósbootstrap.css
:fonte
Basta adicionar uma folha de estilo "personalizada" que é carregada após a folha de estilo do Bootstrap. Portanto, as definições de classe estão sobrecarregadas.
Nesta folha de estilo, declare o alinhamento da seguinte maneira:
Agora você pode usar as convenções de alinhamento "comuns" para os elementos td e th.
fonte
Eu acho que porque CSS já tem
text-align:right
, AFAIK, o Bootstrap não tem uma classe especial para ele.O Bootstrap tem "pull-right" para divs flutuantes, etc. para a direita.
O Bootstrap 2.3 acabou de sair e adicionou estilos de alinhamento de texto:
Lançamento do Bootstrap 2.3 (07-02-2013)
fonte
O Bootstrap 4 está chegando ! As classes de utilitário familiarizadas no Bootstrap
3.x
agora estão ativadas para o ponto de interrupção. Os pontos de interrupção padrão são:xs
,sm
,md
,lg
exl
, por isso, essas classes de alinhamento de texto algo parecido.text-[breakpoint]-[alignnment]
.Importante: Ao escrever isso, o Bootstrap 4 está apenas no Alpha 2. Essas classes e como elas são usadas estão sujeitas a alterações sem aviso prévio.
fonte
Alinhamento de texto de inicialização na v3.3.5:
Exemplo de CodePen
fonte
As seguintes linhas de código estão funcionando corretamente. Você pode atribuir as classes como centro do texto, esquerda ou direita. O texto será alinhado de acordo.
Aqui não há necessidade de criar nenhuma classe externa. Estas são as classes Bootstrap e têm sua própria propriedade.
fonte
Você pode usar este CSS abaixo:
fonte
A
.text-align
classe é totalmente válida e mais útil do que ter um.price-label
e.price-value
que não tem mais utilidade.Eu recomendo ir 100% com uma classe de utilitário personalizada chamada
Eu gosto de fazer mágica, mas isso depende de você, como algo:
fonte
Aqui está uma resposta curta e agradável com um exemplo.
fonte
link
escript
válida fora dohead
oubody
tags? Por que não fornecer um exemplo completo e válido de documento HTML?Expandindo a resposta de David , apenas adicionei uma classe simples para aumentar o Bootstrap assim:
fonte
Agora, com o lançamento do Bootstrap 3, você pode usar as classes de
text-center
para alinhamento central,text-left
para alinhamento esquerdo,text-right
para alinhamento direito etext-justify
para um alinhamento justificado.O Bootstrap é uma estrutura de frontend muito simples de se trabalhar, depois que você a utiliza. Além de ser muito fácil de personalizar para se adequar ao seu gosto.
fonte
Temos cinco classes para isso, que você pode consultar aqui: http://v4-alpha.getbootstrap.com/components/utilities/
fonte
Aqui está a solução mais simples
Confira aqui: Demo
fonte
fonte
No Bootstrap versão 4. Existem algumas classes embutidas para posicionar o texto.
Para o cabeçalho da tabela de centralização e o texto dos dados:
Você também pode usar essas classes para posicionar qualquer texto.
Para mais detalhes
Espero que ajude você.
fonte
Nesta classe inválida de inicialização de três classes
fonte
Use
text-align:center !important
. Pode haver outrastext-align
regras de CSS, então isso!important
é importante.fonte