2

Numa página web ".cshtml" tenho várias labels que declaram a classe form-horizontal e a classe control-label. Por padrão, essas classes alinham á direita no meu projeto, ou seja.. implementam a propriedade text-align: right, Porém eu necessito alterar o valor desta propriedade apenas para dois casos, e não estou conseguindo, não surte efeito.

O que eu já tentei:

CSS

.form-horizontal .control-label .text-left{
    text-align: left !important;
}

LABEL

    <div class="col-md-6">
        @Html.LabelFor(x => x.observacoes, "Observações Internas:", new { @class = "control-label text-left" })
    </div>

Também já tentei atribuir ID e usar "#" na classe do CSS, sem sucesso e atribuir direto nos atributos Html do componente, inclusive com "!important" mas não funcionou.

1
  • 1
    Te respondi na minha resposta rss. Depois olha lá. Pesquise sobre "media query" no google que vc acha MUITA coisa e é fácil de entender vc vai ver!
    – hugocsl
    16/05/2018 às 17:55

1 Resposta 1

1

Acredito que esse seja o seu problema, mas se não for me fala que eu removo a resposta.

A classe original no CSS do Bootstrap é assim, repare que ela está dentro de um @media, talvez esse seja seu problema:

@media (min-width: 768px) {
    .form-horizontal .control-label {
        padding-top: 7px;
        margin-bottom: 0;
        text-align: right; /* aqui define o alinhamento */
    }
}

Já em telas pequenas, menores que 768px o estilo original da label muda para:

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

Então confere se vc está setando o estilo no lugar certo.

Visto isso, acredito que vc resolve seu problema assim, crie a classe .form-horizontal .control-label.text-left da forma abaixo e veja se da certo!

@media (min-width: 768px) {
    .form-horizontal .control-label.text-left {
        padding-top: 7px;
        margin-bottom: 0;
        text-align: left; /* alinhado a esquerda */
    }
}
label.text-left {
    text-align: left; /* alinhado a esquerda */
}
2
  • 1
    Deu certo cara, muito obrigado.. se puder complementar a resposta com alguns links de conteúdo sobre CSS e o componente @media, ficaria grato. 16/05/2018 às 17:35
  • Aqui tem um artigo da Mozilla em português de como usar @media developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/… é bem simples de entender. Sobre CSS no geral o esquema é ler tudo que vc puder. Tente aprender um estilo por dia. Peque um tempo e estudo só background, depois só position, depois display flex, etc por ai vai. Mas no geral a Documentação da Mozilla é bem interessante e o W3School tb é bem didático com exemplos práticos etc
    – hugocsl
    16/05/2018 às 17:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .