Bootstrap을 사용하여 반응형 레이아웃에서 요소를 숨기는 방법은 무엇입니까?
2024년 12월 21일에 게시됨
검색:528
부트스트랩을 사용하여 반응형 레이아웃에서 요소 숨기기
반응형 레이아웃을 디자인할 때 특히 작은 화면에서는 공간 관리가 중요합니다. Bootstrap은 모바일 장치용 메뉴 표시줄 항목 축소를 지원하지만 다른 페이지 요소를 유사하게 숨기고 싶다면 어떻게 해야 할까요?
해결책:
Bootstrap은 다음을 수행할 수 있는 클래스를 제공합니다. 화면 크기에 따라 요소를 숨기려면:
- 초소형 장치: 전화 (
- 소형 장치: 태블릿 (≥768px) - .visible-sm-* ( 표시), .hidden-sm (숨기기)
- 매체 장치: 데스크탑(≥992px) - .visible-md-*(표시), .hidden-md(숨기기)
- 대형 장치: 데스크탑(≥1200px) - . visible-lg-*(표시), .hidden-lg (hide)
사용 예:
작은 화면에서 .nav-pills 요소를 숨기려면:
추가 참고 사항:
- Bootstrap 4의 경우 Hidden-*-up(더 큰 중단점을 위해 숨김) 또는 Hidden-*-down을 사용하세요. (더 작은 중단점을 위해 숨김).
- Bootstrap 3.2.0은 더 이상 사용되지 않습니다. .hidden-*를 선호합니다. .visible-*.
- 이전 Bootstrap 버전에서는 .hidden-phone 및 .hidden-tablet가 더 이상 사용되지 않습니다.
최신 튜토리얼
더>
-
고유 ID를 유지하고 중복 이름을 처리하면서 PHP에서 두 개의 연관 배열을 어떻게 결합합니까?PHP에서 연관 배열 결합PHP에서는 두 개의 연관 배열을 단일 배열로 결합하는 것이 일반적인 작업입니다. 다음 요청을 고려하십시오.문제 설명:제공된 코드는 두 개의 연관 배열 $array1 및 $array2를 정의합니다. 목표는 두 배열의 모든 키-값 쌍을 통합하는 ...프로그램 작성 2024년 12월 21일에 게시됨 -
VS2010의 혼합 C 및 C++ 프로젝트에서 LNK2001 링커 오류를 해결하는 방법은 무엇입니까?VS2010의 C 및 C 혼합 프로젝트에서 링커 오류 해결문제 설명C 코드를 다른 VS2010 프로젝트의 C 프로젝트에 통합하면 결과가 발생합니다. C 코드에서 C 함수를 호출할 때 링크 오류가 발생합니다. LNK2001로 식별된 오류는 해결되지 않은 외부 기호와 관련...프로그램 작성 2024년 12월 21일에 게시됨
-
.NET MySqlCommand에서 MySQL 사용자 정의 변수를 활성화하는 방법은 무엇입니까?.NET MySqlCommand에서 MySql 사용자 정의 변수 사용.NET MySqlCommand 내에서 사용자 정의 변수와 관련된 MySQL 문을 실행할 때 다음과 같은 문제가 발생할 수 있습니다. 치명적인 오류. 이 문제를 해결하려면 다음 단계를 따르십시오.코드에...프로그램 작성 2024년 12월 21일에 게시됨
-
Windows용 XAMPP에서 PHP를 업그레이드하는 방법: 단계별 가이드Windows용 XAMPP에서 PHP 업그레이드: 종합 가이드Windows용 XAMPP에서 PHP를 업그레이드하는 것은 보안, 기능 및 보안을 유지하는 데 매우 중요합니다. 웹 애플리케이션의 호환성. 이 가이드는 PHP를 성공적으로 업그레이드하기 위한 단계별 프로세스를...프로그램 작성 2024년 12월 21일에 게시됨
-
내 PHP 스크립트가 명령줄에서 실행되고 있는지 아니면 HTTP를 통해 실행되고 있는지 어떻게 확실하게 확인할 수 있습니까?PHP에서 명령줄 실행과 HTTP 실행 비교PHP 스크립트 개발의 일반적인 작업은 실행 환경 유형을 결정하는 것입니다. 스크립트는 명령줄이나 HTTP를 통해 실행됩니다. 이 지식은 출력 형식을 결정하고 이에 따라 동작을 사용자 정의하는 데 중요합니다.SERVER[...프로그램 작성 2024년 12월 21일에 게시됨
-
`if` 문 너머: 명시적 `bool` 변환이 있는 유형을 형변환 없이 사용할 수 있는 다른 곳은 어디입니까?형변환 없이 허용되는 bool로의 상황별 변환귀하의 클래스는 bool로의 명시적 변환을 정의하여 해당 인스턴스 't'를 조건문에서 직접 사용할 수 있도록 합니다. 그러나 이 명시적 변환은 다음과 같은 질문을 제기합니다. 캐스트 없이 't'를...프로그램 작성 2024년 12월 21일에 게시됨
-
내 웹 양식의 최대 POST 데이터 크기를 어떻게 늘릴 수 있습니까?향상된 양식 제출을 위한 게시물 데이터 처리 최대화웹 개발에서는 사용자 입력이나 파일 업로드와 같은 상당한 양의 데이터가 양식 요소를 통해 제출됩니다. 웹사이트의 원활한 운영을 보장하려면 대량의 게시물 데이터를 처리하는 것이 중요할 수 있습니다. 그러나 최대 게시물 크...프로그램 작성 2024년 12월 21일에 게시됨
-
C++에서 정적 const std::string 멤버를 정의하는 방법은 무엇입니까?const std::stringC에서 std::string 유형의 전용 정적 const 멤버 정의 아래와 같이 클래스 내 초기화를 사용하는 클래스 내에서는 C 표준을 준수하지 않습니다.class A { private: static const string...프로그램 작성 2024년 12월 21일에 게시됨
-
Uvicorn을 사용하여 FastAPI에서 동시 HTTP 요청을 할 때 "ConnectionClosed" 오류를 방지하려면 어떻게 해야 합니까?Uvicorn/FastAPI에서 HTTP 요청 만들기FastAPI 및 Uvicorn을 사용하여 구축된 HTTP 엔드포인트를 처리할 때 외부 API에서 데이터를 요청하는 것이 일반적입니다. 그러나 여러 동시 요청을 처리하는 경우 "role=SERVER 및 sta...프로그램 작성 2024년 12월 21일에 게시됨
-
macOS의 Django에서 \"부적절하게 구성됨: MySQLdb 모듈 로드 오류\"를 수정하는 방법은 무엇입니까?MySQL이 잘못 구성됨: 상대 경로 문제Django에서 python prepare.py runserver를 실행할 때 다음 오류가 발생할 수 있습니다:ImproperlyConfigured: Error loading MySQLdb module: dlopen(/Libra...프로그램 작성 2024년 12월 21일에 게시됨
-
비표준 인증서 파일을 사용하여 Go 웹 서버에서 HTTPS를 설정하는 방법은 무엇입니까?비표준 인증서 파일을 사용하여 Go 웹 서버에서 HTTPS를 설정하는 방법제공된 문서에서는 3개의 .pem 파일을 연결할 것을 권장합니다. 그러나 해당 파일이 없는 경우 보유하고 있는 인증서 파일을 사용하여 HTTPS를 설정하는 방법은 다음과 같습니다.중간 인증서 결합...프로그램 작성 2024년 12월 21일에 게시됨
-
하위 요소가 있는 절대 위치 Div에서 마우스아웃 이벤트를 안정적으로 처리하려면 어떻게 해야 합니까?jQuery 없이 하위 요소가 있는 절대 Div에서 마우스아웃 이벤트 처리절대 위치에 있는 div를 처리할 때 마우스아웃 이벤트를 처리하는 것이 어려울 수 있습니다. 기본적으로 상위 div 내의 하위 요소 위로 마우스를 가져가면 마우스가 외부 div를 종료하기 전에 m...프로그램 작성 2024년 12월 21일에 게시됨
-
PHP의 `==` 연산자와 `===` 연산자의 차이점은 무엇입니까?PHP 더블(==)과 트리플(===) 동등 비교는 어떻게 다릅니까?PHP에서 값을 비교할 때 두 가지 느슨하게 동일(==) 연산자와 완전 동일(===) 연산자와 같은 개별 연산자를 사용할 수 있습니다. 신뢰할 수 있는 비교를 보장하려면 미묘한 차이를 이해하는 것이 중요...프로그램 작성 2024년 12월 21일에 게시됨
-
JavaScript에서 문자열에 대한 수학을 어떻게 수행할 수 있나요?수학 연산을 위해 문자열을 숫자로 변환숫자가 포함되어 있음에도 불구하고 문자열을 숫자로 직접 조작할 수는 없습니다. 산술 연산을 수행하려면 먼저 이를 숫자 형식으로 변환해야 합니다.주어진 예를 고려하십시오.var num1 = '20', num2 = '30.5';...프로그램 작성 2024년 12월 21일에 게시됨
-
내 Div가 겹치는 이유는 무엇입니까? 마진 축소 이해 및 해결여백 축소: Div 레이아웃의 중복 이해 및 해결여러 div 요소가 포함된 레이아웃을 디자인할 때 여백의 개념을 이해하는 것이 중요합니다. 원하지 않는 여백이 겹치는 것을 방지하려면 축소하세요. 여백 축소는 인접한 요소의 여백이 함께 병합될 때 발생하는 CSS 동작으로...프로그램 작성 2024년 12월 21일에 게시됨
중국어 공부
- 1 "걷다"를 중국어로 어떻게 말하나요? 走路 중국어 발음, 走路 중국어 학습
- 2 "비행기를 타다"를 중국어로 어떻게 말하나요? 坐飞机 중국어 발음, 坐飞机 중국어 학습
- 3 "기차를 타다"를 중국어로 어떻게 말하나요? 坐火车 중국어 발음, 坐火车 중국어 학습
- 4 "버스를 타다"를 중국어로 어떻게 말하나요? 坐车 중국어 발음, 坐车 중국어 학습
- 5 운전을 중국어로 어떻게 말하나요? 开车 중국어 발음, 开车 중국어 학습
- 6 수영을 중국어로 뭐라고 하나요? 游泳 중국어 발음, 游泳 중국어 학습
- 7 자전거를 타다 중국어로 뭐라고 하나요? 骑自行车 중국어 발음, 骑自行车 중국어 학습
- 8 중국어로 안녕하세요를 어떻게 말해요? 你好중국어 발음, 你好중국어 학습
- 9 감사합니다를 중국어로 어떻게 말하나요? 谢谢중국어 발음, 谢谢중국어 학습
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
