Twitter Bootstrap 3에서 반응 형 기능을 제거하는 방법은 무엇입니까?

85

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

twitter-bootstrap  responsive-design  media-queries  twitter-bootstrap-3 
— 카나리 푸글
소스
1
이 블로그 게시물 에는 이 를 수행하는 방법에 대한 정보와 Github의 완성 된 버전에 대한 링크가 있습니다.
— bbill
1
@STLDeveloper가 dec. 부트 스트랩 3은 2 일이나 된 것입니다.
— kanarifugl
1
@STLDeveloper, 그는 반응 형 파일이 더 이상 부트 스트랩 3 에서 분리되지 않는다고 말합니다 . 블로그 게시물과 Bootstrap의 Github 계정에서 변경 사항을 설명합니다.
— bbill
부트 스트랩 문서는 그것을 수행하는 방법에 대해 설명 : getbootstrap.com/getting-started/#disable-responsive
— 니콜라스 Janel
@NicolasJanel 귀하의 링크가 죽었습니다.
— Dmitry

답변:

104

데스크톱이 아닌 스타일을 비활성화하려면 variables.less 파일에서 4 줄의 코드 만 변경하면됩니다. 다음과 같이 variables.less 파일에서 화면 너비 중단 점을 설정합니다.

// 미디어 쿼리 중단 점
// ------------------------------------------------ -

// 매우 작은 화면 / 전화
// 참고 : v3.0.1부터 @ screen-xs 및 @ screen-phone이 더 이상 사용되지 않습니다.
@ screen-xs : 1px;
@ screen-xs-min : @ screen-xs;
@ screen-phone : @ screen-xs-min;

// 작은 화면 / 태블릿
// 참고 : v3.0.1부터 @ screen-sm 및 @ screen-tablet 지원 중단됨
@ screen-sm : 2px;
@ screen-sm-min : @ screen-sm;
@ screen-tablet : @ screen-sm-min;

// 중간 화면 / 데스크톱
// 참고 : v3.0.1부터 @ screen-md 및 @ screen-desktop 지원 중단됨
@ screen-md : 3px;
@ screen-md-min : @ screen-md;
@ screen-desktop : @ screen-md-min;

// 대형 화면 / 와이드 데스크탑
// 참고 : v3.0.1부터 @ screen-lg 및 @ screen-lg-desktop이 더 이상 사용되지 않습니다.
@ screen-lg : 9999px;
@ screen-lg-min : @ screen-lg;
@ screen-lg-desktop : @ screen-lg-min;

이것은 모든 화면 너비에 적용되도록 데스크탑 스타일 미디어 쿼리의 최소 너비를 낮게 설정합니다. 개선을 위해 2calledchaos에게 감사드립니다! 일부 기본 스타일은 모바일 스타일에 정의되어 있으므로 반드시 포함해야합니다.

편집 : chris는 부트 스트랩 사이트의 온라인 덜 컴파일러에서 이러한 변수를 설정할 수 있다고 말합니다.

— 제이 더글라스
소스
7
@ grid-float-breakpoint 변수를 1px로 변경하여 탐색 모음이 쌓이지 않도록 할 수도 있습니다.
— Chris
8
와우, 이것은 부트 스트랩 사용자 정의 다운로드 사이트의 온라인 컴파일러에서도 작동합니다!
— 크리스
1
위의 작업이 확실하지 않습니다. 누군가 정의하면 @media (min-width: @screen-sm-min)(이 스타일을 sm 중단 점 및 모든 상위 중단 점, 즉, sm, md, lg에 적용), 위의 재정의는 정의가 더 이상 md에 적용되지 않기 때문에 해당 가정을 깨뜨릴 것입니다. @ screen-xs를 1px로, @ screen-sm도 1px로 설정했습니다 (@ screen-md가 1px 인 것 외에도). 이러한 방식으로 모든 xs, sm 및 md 스타일이 적용되어 소스 순서 우선 순위로 대체됩니다.
— Martin Suchanek 2014
1
xs에는 1px, sm에는 2px, md에는 3px, lg에는 9999px를 사용하는 것이 좋습니다. 이렇게하면 "모바일 모드"에서 navbar 및 모달이 없습니다.
— 2called-chaos 2014
1
작동하지만, 브라우저 수평 스크롤은 아직 행방 불명
— Cichy
45

이것은 공식 Bootstrap 3 릴리스 문서에 설명되어 있습니다 .

반응 형보기를 비활성화하는 단계

반응 형 기능을 비활성화하려면 다음 단계를 따르십시오. 아래 수정 된 템플릿에서 실제로 확인하십시오.

  1. <meta>CSS 문서에 언급 된 뷰포트를 제거 (또는 추가하지 마십시오)
  2. max-width를 가진 모든 그리드 계층에 대해 .container에서 max-width를 제거하십시오. none! important; 너비 : 970px;와 같은 일반 너비를 설정합니다. 이것이 기본 부트 스트랩 CSS 뒤에 오는지 확인하십시오. 선택적으로 미디어 쿼리 또는 일부 선택기에서! important를 피할 수 있습니다.
  3. navbar를 사용하는 경우 모든 navbar 축소 및 확장 동작을 실행 취소합니다 (여기에 표시하기에는 너무 많으므로 예제를 살펴보십시오).
  4. 그리드 레이아웃의 경우 중간 / 대형 클래스에 추가하거나 대신 .col-xs- * 클래스를 사용하십시오. 초소형 장치 그리드가 모든 해상도로 확장되므로 걱정하지 마십시오.

IE8 용 Respond.js가 여전히 필요합니다 (미디어 쿼리가 여전히 존재하며 선택해야하기 때문입니다). 이것은 부트 스트랩의 "모바일 사이트"를 비활성화합니다.

GetBootstrap.com/examples/non-responsive/ 의 예제도 참조하십시오.

— Lborgav
소스
5
이것은 나를 위해 작동하지 않았습니다. 일부 요소는 뷰포트의 너비에 반응합니다.
— Ziyan Junaideen
@ZiyanJunaideen 아마도 뭔가를 놓친 것 같습니다. jsfiddle을 제공 할 수 있습니까?
— Adrien Be
1
이것은 나를 위해 일했습니다. 정답으로 표시해야한다고 생각합니다.
— Dave Stewart
20

최근에 부트 스트랩 v3.1.1이 응답하지 않도록 만드는 것이 얼마나 쉬운 지 알아 냈습니다. 여기에는 접히지 않는 탐색 모음이 포함됩니다. 모두가 아는지는 모르겠지만 공유하고 싶습니다.

응답하지 않는 Bootsrap v3.1.1을위한 두 단계

먼저 non-responsive.css로 css 파일 이름을 만듭니다. 테마에 추가하거나 부트 스트랩 CSS 파일 바로 뒤에 링크하십시오.

둘째,이 코드를 non-responsive.css에 붙여 넣습니다.

/* Template-specific stuff
 *
 * Customizations just for the template; these are not necessary for anything
 * with disabling the responsiveness.
 */

/* Account for fixed navbar */
body {
  min-width: 970px;
  padding-top: 70px;
  padding-bottom: 30px;
}

/* Finesse the page header spacing */
.page-header {
  margin-bottom: 30px;
}
.page-header .lead {
  margin-bottom: 10px;
}


/* Non-responsive overrides
 *
 * Utilitze the following CSS to disable the responsive-ness of the container,
 * grid system, and navbar.
 */

/* Reset the container */
.container {
  width: 970px;
  max-width: none !important;
}

/* Demonstrate the grids */
.col-xs-4 {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
}

.container .navbar-header,
.container .navbar-collapse {
  margin-right: 0;
  margin-left: 0;
}

/* Always float the navbar header */
.navbar-header {
  float: left;
}

/* Undo the collapsing navbar */
.navbar-collapse {
  display: block !important;
  height: auto !important;
  padding-bottom: 0;
  overflow: visible !important;
}

.navbar-toggle {
  display: none;
}
.navbar-collapse {
  border-top: 0;
}

.navbar-brand {
  margin-left: -15px;
}

/* Always apply the floated nav */
.navbar-nav {
  float: left;
  margin: 0;
}
.navbar-nav > li {
  float: left;
}
.navbar-nav > li > a {
  padding: 15px;
}

/* Redeclare since we override the float above */
.navbar-nav.navbar-right {
  float: right;
}

/* Undo custom dropdowns */
.navbar .navbar-nav .open .dropdown-menu {
  position: absolute;
  float: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-width: 0 1px 1px;
  border-radius: 0 0 4px 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
  color: #333;
}
.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar .navbar-nav .open .dropdown-menu > .active > a,
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #fff !important;
  background-color: #428bca !important;
}
.navbar .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
  color: #999 !important;
  background-color: transparent !important;
}

그게 다야 .. ^^

출처 : getbootstrap.com에 있는 예제의 non-responsive.css .

— 지 넥서스
소스
2
우와 아주 좋아! 감사합니다 :)
— 로널드 아라 우호
2
여기에 복사 / 붙여 넣기 할 때 코드 소스에 링크하십시오.
— ba0708 2015 년
11

출처 : http://getbootstrap.com/getting-started/#disable-responsive

  1. 뷰포트 생략 <meta>CSS 문서에 언급 된
  2. 재정 width상의를 .container하나의 폭이 각 격자 계층에 대한 예를 들어 width: 970px !important;확인이 기본 부트 스트랩 CSS 후 오는합니다. 선택적으로 피할 수 있습니다.!important with media query 또는 일부 selector-fu를 .
  3. navbar를 사용하는 경우 모든 navbar 축소 및 확장 동작을 제거합니다.
  4. 그리드 레이아웃 .col-xs-*의 경우 중간 / 대형 클래스에 추가하거나 대신 클래스를 사용 하십시오. 초소형 장치 그리드는 모든 해상도로 확장되므로 걱정하지 마십시오.
— Sophy
소스
5

응답하지 않는 기능이있는 Bootstrap 3 CSS를 사용하면됩니다.

https://github.com/bassjobsen/non-responsive-tb3

— ɐsɹǝʌ ǝɔıʌ
소스
1
좋지만 너무 나쁘다. 부트 스트랩 CSS의 전체 세트입니다. 응답 기능을 비활성화하기 위해서만 CSS를 사용하는 것이 좋을 것입니다. 이름을 "nonresponsive.css"라고합시다. 이렇게하면 nonresponsive.css를 포함하면 반응 형 리처가 비활성화됩니다. 해당 CSS를 제거하면 응답이 복원됩니다.
— user1995781 2013-10-22
1
위 링크에 게시 된 원래 bootstrap.css 및 응답하지 않는 bootstrap.css를 헤더에 추가하여 제안한 것을 수행 할 수 있습니다. 물론 원하는대로 이름을 바꿀 수 있습니다. 줄을 주석 처리하면 원하는대로 작동합니다.
— ɐsɹǝʌ ǝɔıʌ
1
예,하지만 모든 사용자 지정 부트 스트랩 테마를 재정의합니다. 예를 들어 bootswatch.com의 테마를 사용하면 해당 CSS로 재정의됩니다.
— user1995781
1
물론이야. 부트 스트랩 대신 사용자 정의 테마를 사용하는 경우 모든 사용자 정의를 잃게되지만 원래 부트 스트랩 CSS를 사용하는 경우에는 그렇지 않습니다.
— ɐsɹǝʌ ǝɔıʌ
0

고정 된 크기의 웹 사이트를 원한다면 이것은 매우 간단합니다.

// Override container sizes
@container-sm:	700px;
@container-md:	700px;
@container-lg:	700px;

// Fixate media queries to tablet view only (lower viewports set to 0px, desired one to 1px, and the higher to ~9999px)

@screen-xs-min: 0px;
@screen-sm-min:	1px;
@screen-md-min: 9999px;
@screen-lg-min: 9999px;

// Disable responsive features such as navbar-collapse
@grid-float-breakpoint: 9999px;
스 니펫 확장

.container-fluid를 사용하지 않는 한 다음을 추가하십시오.

.container-fluid {
    width: 700px;
}
body {
    width: 700px + @general-min-width;
}
— Hrvoje Golcic
소스
-2

www.goo.gl/2SIOJj를 보세요 진행중인 작업이지만 도움이 될 수 있습니다.

쿠키를 사용하여 데스크톱 또는 반응 형 버전을 원하는지 정의합니다. 페이지 바닥 글에는 두 개의 스팬이 있으며 general.js는 클릭을 처리하는 스크립트입니다.

        <div class="col-xs-6" style="text-align:center;"><span class="make_desktop">Desktop</span></div>
        <div class="col-xs-6" style="text-align:center;"><span class="make_responsive">Mobile</span></div>

function setMobDeskCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value + "; path=/";
    window.location.reload();
}

$(function() {
    $(".make_desktop").click(function() {
        setMobDeskCookie('deskmob', 1, 3650);
    });
    $(".make_responsive").click(function() {
        setMobDeskCookie('deskmob', 0, 3650);
    });
});`enter code here`

나는 내 모든 사용자 정의 CSS를 두 개의 파일로 분할했습니다. 부트 스트랩 탐색을 사용하지 않지만 내 사용자 정의 스타일의 대부분을 사용하므로 전체 문제를 해결하지는 않지만 나를 위해 작동합니다

그리드가 큰 화면 버전을 유지하도록 강제하는 non-responsive.css도 만들었습니다.

모바일을 선택하면로드 / 에코 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  
<!-- Bootstrap core CSS and JS -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <link href="/themes/responsive_lime/bootstrap-3_1_1/css/bootstrap.css" rel="stylesheet">
        <script src="/themes/responsive_lime/bootstrap-3_1_1/js/bootstrap.min.js"></script>

and load these stylesheets
<link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style.css?modified=14-06-2014-12-27-40" />
<link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style-responsive.css?modified=1402758346" />

데스크탑을 선택하면 / echo를로드합니다.

<meta name="viewport" content="width=1024">    


        <!-- Bootstrap core CSS and JS -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <link href="/themes/responsive_lime/bootstrap-3_1_1/css/bootstrap.css" rel="stylesheet">
        <script src="/themes/responsive_lime/bootstrap-3_1_1/js/bootstrap.min.js"></script>

        <!-- Main CSS -->
        <link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style.css?modified=14-06-2014-12-27-40" />
<link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/non-responsive.css?modified=1402758635" />

non-responsive.css는 부트 스트랩에 대한 재정의가있는 것입니다. 내 관심사는 레이아웃이므로 내 방식으로 탐색을 처리하므로 내 방식으로 탐색을 처리하고 다른 비트는 내 다른 CSS 파일에 있습니다.

내 설정은 내가 본 다른 솔루션과 달리 데스크톱 브라우저에서도 데스크톱으로 작동하므로 모바일 장치에서만 작동하는 것처럼 보이는 뷰포트 만 무시합니다.

— Tomre
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.