"col-xs-*"이 Bootstrap 4에서 작동하지 않음
저는 이런 일을 겪어본 적이 없어서 해결책을 찾기가 매우 어렵습니다.부트스트랩에 매체와 동일한 열이 있는 경우:
<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>
col-xs-*부트스트랩 4에서 삭제되어 에 유리하게 되었습니다.col-*.
교체하다col-xs-12와 함께col-12예상대로 작동할 겁니다
참고 사항col-xs-offset-{n}로 대체되었습니다.offset-{n}v4로
그냥 궁금했어요, 왜요col-xs-6하지만 부트스트랩 4 문서에서 답을 찾았습니다.이전 버전에서는 매우 작은 장치에 대한 클래스 접두사가 현재 사용되고 있습니다.col-xs.
https://getbootstrap.com/docs/4.1/layout/grid/ #grid-delays
부트스트랩 4에서 모두 삭제됨col-xs-*클래스, 사용col-*대신.예를들면col-xs-6로 대체된.col-6.
그들은 부트스트랩이 모바일 우선 개발 도구로 간주되기 때문에 XS를 떨어뜨렸습니다.기본값은 xs로 간주되므로 정의할 필요가 없습니다.
부트스트랩 4.3에서 col-xs-{value}이(가) col-{value}(으)로 대체됨
sm, md, lg, xl은 변동이 없습니다.
.col-{value}
.col-sm-{value}
.col-md-{value}
.col-lg-{value}
.col-value-{value}
이전 구문을 사용하거나 모든 템플릿을 다시 작성하지 않으려면 이 작업을 수행할 수 있습니다.
@for $i from 1 through $grid-columns {
@include media-breakpoint-up(xs) {
.col-xs-#{$i} {
@include make-col-ready();
@include make-col($i);
}
}
}
부트스트랩 4에서 추가로 작은 클래스를 적용하려면 col-.를 사용해야 합니다. 중요한 것은 col-xs-가 부트스트랩 4에서 삭제된다는 것입니다.
언급URL : https://stackoverflow.com/questions/41794746/col-xs-not-working-in-bootstrap-4
'programing' 카테고리의 다른 글
| Swift를 사용하는 문자열의 하위 문자열 인덱스 (0) | 2023.08.18 |
|---|---|
| 선택을 취소하는 가장 좋은 방법선택을 취소하는 가장 좋은 방법선택을 취소하는 가장 좋은 방법 (0) | 2023.08.18 |
| SmtpClient를 사용하여 C#을 통해 HTML 전자 메일 보내기 (0) | 2023.08.18 |
| MySQL JSON_MERGE / REPLACE.값을 실제로 업데이트하고 병합하지 않는 방법 (0) | 2023.08.13 |
| 쿼리 중에 MySQL 서버에 대한 연결 끊김' 오류가 자주 발생하는 이유(시간 초과 발생, 쿼리 전 ping) (0) | 2023.08.13 |