`col-xs- *` non funziona in Bootstrap 4

169

Non l'ho mai visto prima e sto facendo fatica a cercare la soluzione. Quando hai una colonna uguale al mezzo nel bootstrap in questo modo:

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

L'allineamento del testo funziona bene:

Ma quando si rende la colonna uguale a extra piccola in questo modo:

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

Quindi l'allineamento del testo non funziona più:

C'è qualche concetto di bootstrap che non capisco o è in realtà un errore come penso che sia. Non ho mai avuto questo problema, poiché il mio testo è sempre stato allineato in passato con xs. Qualsiasi aiuto sarebbe molto apprezzato. Ecco il mio codice 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-*non esiste più nell'ultima versione v4, ecco perché lo stai vedendo. Il col-xs-12non hai insieme larghezza di 100% come il vostro col-md-12. Controlla DevTools per vedere tutto e vedere questo Pull

— vanburen il

436

col-xs-*sono stati rilasciati in Bootstrap 4 a favore di col-*.

Sostituisci col-xs-12con col-12e funzionerà come previsto.

Anche le note col-xs-offset-{n}sono state sostituite da offset-{n}in v4.

— tao
fonte

8

Mai nemmeno pensato / conosciuto di questo! Grazie mille.

— YoungCoder

12

Controlla sempre i documenti . Buona programmazione! ::} <((((*> ::

— tao

8

Questo non è qualcosa per cui normalmente verifichi i documenti. Ero in tutti i documenti e anche questo mi mancava. Avevo pensato, oltre due migrazioni del sito bs4 ora, che col fosse generico, e col-xs sarebbe stato specifico, tuttavia col senno di poi questo non ha senso, perché essendo mobile prima, xs e up sono generici (impostazione predefinita). Grazie per il promemoria, penso di averlo scremato durante la mia ultima migrazione, ma ero bloccato su questo su questo.

— blamb

1

Una cosa però Andrei; è solo "xs" che è stato eliminato, o ce ne sono anche altri?

— Funk Forty Niner,

2

Si prega di leggere questa risposta su ciò che è cambiato tra v3 e v4 .) E anche un collegamento a uno strumento, se si decide di procedere in questo modo. Non è un compito facile e IMHO è più facile lavorare su un modello pulito e basta inserire il php che cambiare il markup.

— Tao,

21

Mi chiedevo solo, perché col-xs-6non ha funzionato per me, ma poi ho trovato la risposta nella documentazione di Bootstrap 4. Il prefisso di classe per dispositivi extra piccoli è ora col-mentre era nelle versioni precedenti col-xs.

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

Bootstrap 4 ha eliminato tutte le col-xs-*classi, quindi usa col-*invece. Ad esempio col-xs-6sostituito da col-6.

— Sabir Hussain
fonte

2

potresti farlo, se vuoi usare la vecchia sintassi (o non vuoi riscrivere tutti i template)

@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

Hanno abbandonato XS perché Bootstrap è considerato uno strumento di sviluppo mobile-first. Il suo valore predefinito è considerato xs e quindi non deve essere definito.

— SMWalker
fonte

1

In Bootstrap 4.3 , col-xs- {value} è sostituito da col- {value}

Non vi è alcun cambiamento in sm, md, lg, xl rimane lo stesso.

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

— Dorjee Karma
fonte

-1

Bootstrap 4 Grid col-xs- * class.

In bootstrap 4 le classi della griglia sono diverse per una vista diversa o per la stessa.

Se si desidera utilizzare la classe .col-xs- *.

Quindi, questa classe funziona per la visualizzazione mobile.

Per vedere la differenza puoi provare questo codice qui sotto e vedere la differenza. Quindi, utilizza questa classe nel tuo codice.

<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 viene rilasciato in Bootstrap 4

— Wariored l'

per favore, dai un'occhiata al link: bitdegree.org/learn/… *% 20in% 20your% 20code.

— bharti parmar,