«responsive-design» 태그된 질문

현재 다음과 같은 것이 있습니다. <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> </div> 이제 content높이가 다르고 너비가 모두 같은 상자가 있다고 가정합니다 . 동일한 "그리드 기반 레이아웃"을 유지하면서 모든 상자가 완벽한 선 대신 서로 아래에 정렬되도록 할 …

88 html  css  twitter-bootstrap  responsive-design  bootstrap-4 

부트 스트랩 3부터는 반응 형 및 표준 스타일 시트를위한 별도의 파일이 더 이상 없습니다. 그렇다면 어떻게 반응 형 기능을 쉽게 제거 할 수 있습니까?

85 twitter-bootstrap  responsive-design  media-queries  twitter-bootstrap-3 

Twitter Bootstrap 예제를 다운로드하여 간단한 레일 프로젝트를 만들었습니다. 필요한 곳에 CSS를 복사했는데 잘 표시됩니다. 또한 js를 복사했고 모든 것이 데스크탑에서 잘 작동합니다. 브라우저의 크기를 변경하면 페이지가 재구성됩니다. 크기가 다른 일부 "반응 형 디자인 테스트 도구"를 사용하면 잘 작동합니다. 내가 가진 문제는 내 iPhone에 있습니다. 내 바탕 화면처럼 표시됩니다. Bootstrap Hero …

84 twitter-bootstrap  responsive-design 

CSS 미디어 쿼리를 사용 max-device-width하여 장치 너비 (예 : iPhone 또는 Android 장치) 및 / 또는 max-width페이지 너비 를 대상으로하는을 대상으로 지정할 수 있습니다 . 을 사용 max-device-width하면 데스크톱에서 브라우저 창의 크기를 변경할 때 데스크톱 크기가 변경되지 않으므로 CSS가 변경되지 않습니다. 을 사용하는 경우 max-width데스크톱에서 브라우저 창의 크기를 변경할 때 …

81 css  responsive-design  media-queries 

less를 사용하는 일부 css 클래스 내에서 다른 해상도에 대해 css 스타일을 래핑하는 것이 좋습니다. 다음과 같은 작업을하고 싶습니다. footer { width: 100%; } .tablet { footer { width: 768px; } } .desktop { footer { width: 940px; } } 결국 다음과 같은 결과가 나타납니다. footer { width: 100%; } @media …

81 css  responsive-design  less  media-queries 

srcset브라우저 개발자 도구를 통해 내 브라우저가 어떤 이미지를 사용 하고 있는지 확인하려고 노력 했지만 네트워크 탭을 사용하여 어떤 이미지를 가져 오는지 알 수 없습니다. 일반적으로 네트워크 탭을 사용하는 것이 좋지만 때로는 다른 크기의 이미지 버전 2 개를 가져 오는 것으로 나타났습니다. 중단 점 하나가 600이고 다른 중단 점이 900이고 브라우저가 …

81 html  css  responsive-design  developer-tools  srcset 

최근에 저는 더 반응이 빠른 사이트를 디자인하고 있으며 CSS 미디어 쿼리를 자주 사용하고 있습니다. 내가 알아 차린 한 가지 패턴은 미디어 쿼리가 정의되는 순서가 실제로 중요하다는 것입니다. 모든 브라우저에서 테스트하지는 않았지만 Chrome에서만 테스트했습니다. 이 동작에 대한 설명이 있습니까? 사이트가 제대로 작동하지 않고 쿼리인지 또는 쿼리가 작성된 순서인지 확실하지 않을 때 …

80 css  media-queries  responsive-design 

저는 Bootstrap 3.1.0을 사용하는 사이트에서 작업하고 있습니다. 모달 창이 열리면 브라우저 스크롤 막대가 잠시 사라졌다가 다시 돌아옵니다. 닫을 때도 마찬가지입니다. 브라우저 스크롤 막대 상호 작용없이 열리고 닫히도록 어떻게 만들 수 있습니까? 사람들이 문제를 겪고있는 스택의 게시물을 보았지만 내 문제에 대한 구체적인 답변을 찾을 수 없습니다. 따라서 다른 사람이이 요청을했고 누군가가이 …

78 html  twitter-bootstrap  responsive-design  twitter-bootstrap-3 

종횡비를 가정하지 않고 iframe을 반응 형으로 만드는 방법은 무엇입니까? 예를 들어, 컨텐츠는 임의의 폭 또는 높이를 가질 수 있으며, 이는 렌더링 전에 알려지지 않았다. Javascript를 사용할 수 있습니다. 예: <div id="iframe-container"> <iframe/> </div> iframe-container내용물이 여분의 공간없이 내부에 거의 들어 가지 않도록 크기를 조정하십시오. 즉, 내용을위한 공간이 충분하므로 스크롤하지 않고 표시 …

14 javascript  html  css  iframe  responsive-design 

사이드 바 / 탐색 컨텐츠 (부트 스트랩 사용)를 데스크탑에서 기본적으로 표시 (확장)하고 모바일에서 기본적으로 닫히고 모바일에서만 아이콘이 표시되도록하는 데 어려움을 겪고 있습니다. 나는 이것을 작동시키지 않는 것 같습니다. <nav class="menu menu-open" id="theMenu"> <div class="menu-wrap"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i> </button> …

9 javascript  html  css  bootstrap-4  responsive-design