문제
현재 브라우저 폭이 아래로 떨어 768px,메뉴 바로 변경하는 축소 모니다.변경하고 싶습니다 이 폭 1000px 그래서 브라우저가 아래 1000px 메뉴 바로 변경하는 축소 모니다.나는 이런 일을 하고 싶지 않고 사용하여 적은,내가 스타일러스를 사용하여 적지 않다.
나의 문제와 같은 이 질문: 스트랩 3 축소 메뉴 바
하지만 모두에 대한 답변된 질문에 그것을 수행하는 방법을 설명을 변경하여 적은 변수가 있습니다.내가되지 않은 다루고,적은 비용으로 사용하고 스타일러 그래서 나는 방법을 알고 싶다면 이를 사용하여 수행할 수 있습 스타일러스 또는 다른 방법이다.
감사합니다!
해결책 2
당신은 구체적인 것을 써야합니다 미디어 쿼리 이를 위해, 귀하의 질문에서 768px 미만으로 Navbar가 붕괴되므로 768px 이상 및 1000px 미만을 적용하십시오.
https://stackoverflow.com/questions/19827605
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian@media (min-width: 768px) and (max-width: 1000px) {
.collapse {
display: none !important;
}
}
이렇게하면 부트 스트랩 장치의 기본 발생이 발생할 때까지 Navbar가 붕괴됩니다. 붕괴 클래스가 뒤집 으면 Navbar Collapse 내부 자산은 자동으로 숨겨집니다.
다른 팁
2018 업데이트
부트 스트랩 4
Bootstrap 4에서 Navbar 브레이크 포인트 변경이 더 쉽습니다. navbar-expand-* 클래스:
<nav class="navbar fixed-top navbar-expand-sm">..</nav>
navbar-expand-sm = XS 화면의 모바일 메뉴 <576pxnavbar-expand-md = SM 화면의 모바일 메뉴 <768pxnavbar-expand-lg = MD 화면의 모바일 메뉴 <992pxnavbar-expand-xl = LG 화면의 모바일 메뉴 <1200pxnavbar-expand = 모바일 메뉴를 사용하지 마십시오(no expand class) = 항상 모바일 메뉴를 사용하십시오당신이 배제하는 경우 navbar-expand-* 모바일 메뉴가 사용됩니다 all 너비. 다음은 6 개의 Navbar 상태의 데모입니다. 부트 스트랩 4 NAVBAR 예제
작은 CSS를 추가하여 사용자 정의 중단 점 (??? px)을 사용할 수도 있습니다. 예를 들어, 여기에 1300px가 있습니다.
@media (min-width: 1300px){
.navbar-expand-custom {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
flex-direction: row;
}
.navbar-expand-custom .dropdown-menu {
position: absolute;
}
.navbar-expand-custom .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-expand-custom > .container {
flex-wrap: nowrap;
}
.navbar-expand-custom .navbar-collapse {
display: flex!important;
flex-basis: auto;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
}
부트 스트랩 4 관습 NAVBAR 브레이크 포인트
부트 스트랩 4 Navbar 브레이크 포인트 예제
부트 스트랩 3.3.x의 경우 여기에 있습니다 일하고 있는 CSS Navbar 브레이크 포인트를 무시합니다. 변화 991px Navbar가 무너지기를 원하는 지점의 픽셀 치수로 ...
@media (max-width: 991px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
991px의 작업 예 : http://www.bootply.com/j7xjuae5v6
1200px의 작업 예 : https://www.codeply.com/go/vsyaolzfb4 (검색 양식 포함)
참고 : 위의 것은 무엇이든 작동합니다 768px 이상. 변경 해야하는 경우 768px 미만 그만큼 768px 미만의 예가 여기에 있습니다.
안에 부트 스트랩,이 변수를 변경하십시오 @그리드 플로트 브레이크 포인트 필요한 사람에게. 기본값은 768px입니다
마침내 '@grid-float-breakpoint'를 사용하여 붕괴 너비를 변경하는 방법을 해결했습니다. http://getbootstrap.com/customize/.
bootstrap.css (MIN 버전)에서 2923 행으로 이동하여 변경하십시오. @media screen and (min-width: 768px) { 에게 @media screen and (min-width: 1000px) {
따라서 코드는 다음과 같습니다.
@media screen and (min-width: 1000px) {
.navbar-brand {
float: left;
margin-right: 5px;
margin-left: -15px;
}
.navbar-nav {
float: left;
margin-top: 0;
margin-bottom: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
border-radius: 0;
}
.navbar-nav.pull-right {
float: right;
width: auto;
}
.navbar-toggle {
position: relative;
top: auto;
left: auto;
display: none;
}
.nav-collapse.collapse {
display: block !important;
height: auto !important;
overflow: visible !important;
}
}
다음 CSS 코드를 사용 하여이 작업을 성공적으로 수행했습니다.
@media(max-width:1000px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse {
overflow-x: visible !important;
}
.navbar-collapse.in {
overflow-y: auto !important;
}
.collapse.in {
display: block !important;
}
}
부트 스트랩에서 소스 코드, 정의 된 변수가 있습니다 variables.less ~라고 불리는 @grid-float-breakpoint 다음과 같은 유용한 의견이 있습니다.
//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;
일치 @grid-float-breakpoint-max 값은 해당 마이너스 1px로 설정됩니다.
//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);
그래서 그냥 설정하십시오 @grid-float-breakpoint 대신 1000px로 값을 얻고 재 구축하십시오 bootstrap.less ~ 안으로 bootstrap.css:
예를 들어
@grid-float-breakpoint: 1000px;
부트 스트랩 변수를 변경하는 SASS 방법은 실제로 부트 스트랩-스ass Github 페이지.
@import bootstrap 전에 변수를 재정의하기 만하면됩니다.
$grid-float-breakpoint: 1000px;
@import 'bootstrap';
@skely 대답 외에도 드롭 다운 메뉴 Navbar Work 내부에서는 클래스를 추가 할 수 있습니다. 최종 코드 벨로우어 :
@media (min-width: 768px) and (max-width: 991px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
/*margin: 7.5px -15px;*/
margin: 7.5px 50px 7.5px -15px
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
탐색의 활용할 수 있습니다.메뉴 바-는 강력한 도구,.메뉴 바로 축소하고,.메뉴 바 확장{-sm|-md|-lg 전자|xl}클래스를 변경하는 경우 그 내용을 축소 뒤에 단추입니다.에서 유틸리티,당신은 쉽게 선택할 수 있습니다면을 표시하거나 숨기고 특정 요소입니다.
에 대한 탐색의 결코 축소,추가.메뉴 바 확장 클래스에서 메뉴 바.에 대한 탐색의는 항상 붕괴를 추가하지 마십시오.메뉴 바 확장 클래스입니다.
예를 들어:
<nav class="navbar navbar-expand-lg"></nav>
모바일 메뉴를 보여주는에서 큰 화면입니다.
Bootstrap V4에서는 내비게이션이 다른 CSS 클래스를 사용하여 조만간 붕괴 될 수 있습니다.
예 :
내비게이션 버튼과 함께 :
이것은 나에게 Bootstrap3을 위해 효과가있었습니다
@media (min-width: 768px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-collapse.collapse.in {
display: block!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
이 두 가지를 알아내는 데 시간이 걸렸습니다.
.navbar-collapse.collapse {
display: none!important;
}
.navbar-collapse.collapse.in {
display: block!important;
}
부트 스트랩 3.3의 경우 이것이 필요한 유일한 코드입니다.
@media (min-width: 768px) and (max-width: 1000px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-toggle{
display: block !important;
}
.navbar-header{
float: none;
}
}
가장 좋은 방법은 사용하는 CSS 프로세서 포트를 사용하는 것입니다.
나는 Sass의 열렬한 팬이므로 현재 사용하고 있습니다. https://github.com/thomas-mcdonald/bootstrap-sass
스타일러스에 대한 포크가있는 것 같습니다. https://github.com/acquisio/bootstrap-stylus
그렇지 않으면 CSS 버전의 가장 친한 친구입니다.
안녕하세요, 이와 같은 CSS를 사용하여 할 수 있다고 생각합니다. 브레이크 포인트 부트 스트랩 메뉴를 변경할 수 있습니다.
@media (max-width: 1200px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
}
.navbar-nav>li {
float: none;
}
.collapse.in{
display:block !important;
}
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
이것이 저를위한 작업 코드입니다. (또한 드롭 다운 Navbar 링크가 작동합니다)
@media (max-width: 1199px) {
.navbar-nav {
margin: 7.5px -15px;
}
.ul-links {
display: block;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none!important;
max-height: none;
}
.navbar-nav {
float: none!important;
}
.navbar-nav>li {
float: none;
}
.collapse.in{
display:block !important;
}
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
이것이 나에게 트릭이 된 일입니다.
@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
Bootstrap 4에서는 Navbar-Expand-*가 과도하게 승차하고 싶다면 햄버거 (Navbar-Toggler)를 확장하고 붕괴시키고 숨기고 숨겨 자신의 CustomStyle.css (또는 Bootstrap.css에서 직접 경향이있는 경우).
예를 들어. 나는 Navbar-expand-LG가 붕괴되기를 원했다. bootstrap.css에서 나는 다음과 같습니다.
@media (max-width: 991.98px) {
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid {
padding-right: 0;
padding-left: 0;
}
}
그리고 그 아래 ...
@media (min-width:992px) {
... lots of styling ...
}
나는 @Media 쿼리를 모두 복사하고 내 스타일에 붙인 다음 내 요구에 맞게 크기를 수정했습니다. 나는 950px에서 붕괴되기를 원했다. @Media 쿼리의 크기가 다른 크기 여야하므로 (추측 중) 컨테이너를 949.98px로 설정하고 다른 @Media 쿼리에 950px를 사용하여 다음 코드가 내 Style.css에 추가되었습니다. 이것은 StackoverFlow와 다른 곳에서 찾은 트위스트 솔루션에서 탈지하기가 쉽지 않았습니다. 도움이 되었기를 바랍니다.
@media (max-width: 949.98px) {
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid {
padding-right: 0;
padding-left: 0;
}
}
@media (min-width: 950px) {
.navbar-expand-lg {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.navbar-expand-lg .navbar-nav {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand-lg .navbar-nav .dropdown-menu-right {
right: 0;
left: auto;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.navbar-expand-lg .navbar-collapse {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.navbar-expand-lg .navbar-toggler {
display: none;
}
.navbar-expand-lg .dropup .dropdown-menu {
top: auto;
bottom: 100%;
}
}
여기에 부트 스트랩과의 반응을 사용하는 작업 코드
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<style>
@media (min-width: 768px) and (max-width: 1000px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-toggle{
display: block !important;
}
.navbar-header{
float: none;
}
}
</style>
이제 Bootstrap 4.4에서 지원됩니다
navbar-expand-sm
