`col-xs- *`는 Bootstrap 4에서 작동하지 않습니다

169

나는 이것을 전에 만난 적이 없으며 해결책을 찾기 위해 매우 어려움을 겪고 있습니다. 부트 스트랩에서 컬럼이 매체와 같을 때 :

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

텍스트 정렬은 잘 작동합니다.

그러나 열을 매우 작게 만들 때 :

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

그런 다음 텍스트 정렬이 더 이상 작동하지 않습니다.

내가 이해하지 못하는 부트 스트랩 개념이 있습니까? 아니면 실제로 오류라고 생각되는 오류입니다. 내 텍스트가 항상 과거 xs와 정렬되어 있기 때문에이 문제가 없었습니다. 도움을 주시면 감사하겠습니다. 내 완전한 코드는 다음과 같습니다.

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

— 영 코더
소스

7

col-xs-*최신 v4 릴리스에는 더 이상 존재하지 않으므로 이것이 표시됩니다. 의 col-xs-12너비는 100 %로 설정되어 있지 않습니다 col-md-12. DevTools에서 모든 것을 확인하고이 Pull

— vanburen을

436

col-xs-*부트 스트랩 4에서 삭제되었습니다 col-*.

교체 col-xs-12로 col-12및 예상대로 작동합니다.

또한 v4에서 col-xs-offset-{n}대체되었습니다 offset-{n}.

— 타오
소스

8

이것에 대해 생각하거나 알지조차 못했습니다! 정말 고맙습니다.

— YoungCoder

12

항상 문서를 확인하십시오 . 행복한 코딩! ::} <(((*> ::

— tao

8

이것은 일반적으로 문서를 확인하는 것이 아닙니다. 나는 문서 전체에 있었고 이것도 놓쳤다. 나는 두 번의 bs4 사이트 마이그레이션을 통해 col이 일반적이고 col-xs가 구체적이라고 생각했지만, 나중에는 xs 이상이 일반적이기 때문에 이해가 안됩니다. 상기시켜 주셔서 감사합니다. 마지막 마이 그레이 션 중에이 기능을 훑어 본 적이 있지만 이것에 갇혀있었습니다.

— blamb

1

Andrei를 통해 한 가지; 삭제 된 것은 "xs"입니까, 아니면 다른 것도 있습니까?

— Funk Forty Niner

2

v3과 v4 사이에 변경된 사항에 대한이 답변을 읽어보십시오 .) 그렇게하기로 결정한 경우 도구 링크도 읽으십시오 . 쉬운 일이 아니고 IMHO는 깨끗한 템플릿으로 작업하고 마크 업을 변경하는 것보다 PHP를 삽입하는 것이 더 쉽습니다.

— tao

21

방금 col-xs-6나에게 도움이되지 않는 이유 가 궁금 했지만 Bootstrap 4 설명서에서 답을 찾았습니다. 초소형 장치의 클래스 접두사는 이제 col-이전 버전에서 사용되었습니다 col-xs.

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

부트 스트랩 4는 모든 col-xs-*클래스를 삭제 했으므로 col-*대신 사용하십시오. 예를 들어 col-xs-6로 대체되었습니다 col-6.

— 사 비르 후세인
소스

2

이전 구문을 사용하거나 모든 템플릿을 다시 쓰지 않으려면이 작업을 수행 할 수 있습니다

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

— 위월 라비 다
소스

2

Bootstrap은 모바일 우선 개발 도구로 간주되기 때문에 XS를 포기했습니다. 기본값은 xs로 간주되므로 정의 할 필요가 없습니다.

— SMWalker
소스

1

에서는 부트 스트랩 4.3 , COL-xs- {값} col- {} 값으로 대체

sm, md, lg, xl 에는 변화가 없으며 xl 은 동일하게 유지됩니다.

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

— 도르지 카르마
소스

-1

부트 스트랩 4 그리드 col-xs- * 클래스.

부트 스트랩 4에서 그리드 클래스는보기마다 다르거 나 동일합니다.

.col-xs- * 클래스를 사용하려는 경우.

따라서이 수업은 모바일보기를 위해 노력하고 있습니다.

차이점을 보려면 아래에서이 코드를 시도하고 차이점을 확인하십시오. 그런 다음 코드에서이 클래스를 사용하십시오.

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

col-xs는 Bootstrap 4

— Wariored

bitdegree.org/learn/… * % 20in % 20your % 20code 링크를 참조하십시오 .

— bharti parmar