O `col-xs- *` não está funcionando no Bootstrap 4

169

Eu não encontrei isso antes e estou tendo muita dificuldade para encontrar a solução. Ao ter uma coluna igual a média no bootstrap da seguinte forma:

<h1 class="text-center">Hello, world!</h1>

  <div class="container">
      <div class="row">
          <div class="col-md-12 text-center">
              <h1>vicki williams</h1>
          </div>
      </div>
  </div>

O alinhamento de texto funciona bem:

Mas ao tornar a coluna igual a muito pequena, é assim:

 <div class="container">
      <div class="row">
          <div class="col-xs-12 text-center">
              <h1>vicki williams</h1>
          </div>
      </div>
  </div>

Em seguida, o alinhamento de texto não funciona mais:

Existe algum conceito de bootstrap que eu não estou entendendo ou é de fato um erro como eu acho que é. Eu nunca tive esse problema, pois meu texto sempre se alinhava no passado com xs. Qualquer ajuda seria muito apreciada. Aqui está o meu código completo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
    <h1 class="text-center">Hello, world!</h1>

      <div class="container">
          <div class="row">
              <div class="col-xs-12 text-center">
                  <h1>vicki williams</h1>
              </div>
          </div>
      </div>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

— YoungCoder
fonte

7

col-xs-*não existe mais na versão mais recente da v4, é por isso que você está vendo isso. O conjunto col-xs-12não possui 100% de largura como o seu col-md-12. Verifique o DevTools para ver tudo e veja esse Pull

— vanburen

436

col-xs-*foram descartados no Bootstrap 4 a favor de col-*.

Substitua col-xs-12por col-12e funcionará conforme o esperado.

Observe também que col-xs-offset-{n}foram substituídos por offset-{n}na v4.

— tao
fonte

8

Nunca pensaria / sabia disso! Muito obrigado.

— precisa saber é o seguinte

12

Sempre verifique os documentos . Feliz codificação! ::} <(((*> ::

— tao

8

Isso não é algo para o qual você normalmente consulta documentos. Eu estava em todos os documentos e também senti falta disso. Eu pensava, em mais de duas migrações de sites bs4 agora, que col era para genérico e col-xs seria específico, no entanto, em retrospectiva, isso não faz sentido, porque ser móvel primeiro, xs e acima é genérico (padrão). Obrigado pelo lembrete, acho que fiz uma pesquisa rápida durante a minha última migração, mas fiquei preso nisso.

— blamb

1

Uma coisa é Andrei; são apenas "xs" descartados, ou existem outros também?

— Funk Quarenta Niner

2

Leia esta resposta sobre o que mudou entre a v3 e a v4 .) E também um link para uma ferramenta, caso você decida seguir esse caminho. Não é uma tarefa fácil e IMHO é mais fácil trabalhar em um modelo limpo e apenas inserir o php do que alterar a marcação.

— tao

21

Eu apenas me perguntei, por col-xs-6que não funcionou para mim, mas então encontrei a resposta na documentação do Bootstrap 4. O prefixo da classe para dispositivos pequenos extras agora está col-nas versões anteriores col-xs.

https://getbootstrap.com/docs/4.1/layout/grid/#grid-options

O Bootstrap 4 eliminou todas as col-xs-*classes; portanto, use-o col-*. Por exemplo, col-xs-6substituído por col-6.

— Sabir Hussain
fonte

2

você pode fazer isso se quiser usar a sintaxe antiga (ou não quiser reescrever todos os modelos)

@for $i from 1 through $grid-columns {
  @include media-breakpoint-up(xs) {
    .col-xs-#{$i} {
      @include make-col-ready();
      @include make-col($i);
    }
  }
}

— wiwolavida
fonte

2

Eles abandonaram o XS porque o Bootstrap é considerado uma ferramenta de desenvolvimento para dispositivos móveis. Seu padrão é considerado xs e, portanto, não precisa ser definido.

— SMWalker
fonte

1

No Bootstrap 4.3 , col-xs- {value} é substituído por col- {value}

Não há alteração em sm, md, lg, xl permanece o mesmo.

.col- {value}
.col-sm- {value}
.col-md- {value}
.col-lg- {value}
.col-xl- {value}

— Dorjee Karma
fonte

-1

Grade de inicialização 4 da classe col-xs- *.

No bootstrap, 4 classes de grade são diferentes para exibição diferente ou para o mesmo.

Se você deseja usar a classe .col-xs- *.

Portanto, esta classe está funcionando para a visualização móvel.

Para ver a diferença, tente este código abaixo e veja a diferença. Em seguida, use essa classe no seu código.

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-sm-4 col-xs-12">Hello!</div>
    <div class="col-lg-4 col-sm-4 col-xs-12">Hi!</div>
    <div class="col-lg-4 col-sm-4 col-xs-12">Hey!</div>
  </div>
</div>

— bharti parmar
fonte

col-xs é eliminado no Bootstrap 4

— Wariored

por favor, dê uma olhada no link: bitdegree.org/learn/… *% 20in% 20your% 20code.

— bharti parmar 09/06