부트 스트랩 3부터는 반응 형 및 표준 스타일 시트를위한 별도의 파일이 더 이상 없습니다. 그렇다면 어떻게 반응 형 기능을 쉽게 제거 할 수 있습니까?
답변
데스크톱이 아닌 스타일을 비활성화하려면 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는 부트 스트랩 사이트의 온라인 덜 컴파일러에서 이러한 변수를 설정할 수 있다고 말합니다.
답변
이것은 공식 Bootstrap 3 릴리스 문서에 설명되어 있습니다 .
반응 형보기를 비활성화하는 단계
반응 형 기능을 비활성화하려면 다음 단계를 따르십시오. 아래 수정 된 템플릿에서 실제로 확인하십시오.
<meta>
CSS 문서에 언급 된 뷰포트를 제거 (또는 추가하지 마십시오)- max-width를 가진 모든 그리드 계층에 대해 .container에서 max-width를 제거하십시오. none! important; 너비 : 970px;와 같은 일반 너비를 설정합니다. 이것이 기본 부트 스트랩 CSS 뒤에 오는지 확인하십시오. 선택적으로 미디어 쿼리 또는 일부 선택기에서! important를 피할 수 있습니다.
- navbar를 사용하는 경우 모든 navbar 축소 및 확장 동작을 실행 취소합니다 (여기에 표시하기에는 너무 많으므로 예제를 살펴보십시오).
- 그리드 레이아웃의 경우 중간 / 대형 클래스에 추가하거나 대신 .col-xs- * 클래스를 사용하십시오. 초소형 장치 그리드가 모든 해상도로 확장되므로 걱정하지 마십시오.
IE8 용 Respond.js가 여전히 필요합니다 (미디어 쿼리가 여전히 존재하며 선택해야하기 때문입니다). 이것은 부트 스트랩의 “모바일 사이트”를 비활성화합니다.
GetBootstrap.com/examples/non-responsive/ 의 예제도 참조하십시오.
답변
최근에 부트 스트랩 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 .
답변
출처 : http://getbootstrap.com/getting-started/#disable-responsive
- 뷰포트 생략
<meta>
CSS 문서에 언급 된 - 재정
width
상의를.container
하나의 폭이 각 격자 계층에 대한 예를 들어width: 970px !important;
확인이 기본 부트 스트랩 CSS 후 오는합니다. 선택적으로 피할 수 있습니다.!important
with media query 또는 일부 selector-fu를 . - navbar를 사용하는 경우 모든 navbar 축소 및 확장 동작을 제거합니다.
- 그리드 레이아웃
.col-xs-*
의 경우 중간 / 대형 클래스에 추가하거나 대신 클래스를 사용 하십시오. 초소형 장치 그리드는 모든 해상도로 확장되므로 걱정하지 마십시오.
답변
부트 스트랩 반응 기능을 완전히 제거해야했고 다음 스 니펫으로 동작을 재정의했습니다.
.container {
width: 960px !important;
}
@media (min-width: 1px) {
.container {
max-width: 940px;
}
.col-lg-1,
.col-lg-2,
[...]
답변
응답하지 않는 기능이있는 Bootstrap 3 CSS를 사용하면됩니다.
답변
고정 된 크기의 웹 사이트를 원한다면 이것은 매우 간단합니다.
// 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;
}