تغيير التمهيد الناف بار انهيار توقف دون استخدام أقل

Question

حاليا عندما عرض المتصفح قطرات أدناه 768px ، الناف بار التغييرات انهار الوضع.أريد تغيير هذا العرض إلى 1000px حتى عندما يكون المستعرض دون 1000px الناف بار التغييرات انهار الوضع.أريد أن أفعل هذا دون استخدام أقل, أنا باستخدام القلم لا أقل.

قضية بلدي هو نفسه كما هو الحال في هذا السؤال: التمهيد 3 الناف بار انهيار

ولكن كل الإجابات في الأسئلة التي توضح كيفية القيام بذلك عن طريق تغيير أقل متغير.لم يتم التعامل مع أقل, أنا باستخدام القلم لذلك أريد أن أعرف كيف يمكن أن يتم هذا باستخدام القلم أو أسلوب آخر.

وذلك بفضل!

Answer 1

عليك أن تكتب معين الاستعلام وسائل الإعلام لهذا من سؤالك أدناه 768px ، الناف بار سوف ينهار, لذا تنطبق عليه أعلاه 768px وتحت 1000px, مثل هذا:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

هذا وسوف إخفاء الناف بار الانهيار حتى الافتراضي حدوث التمهيد وحدة.كما انهيار الطبقة تقلب الداخلية الأصول داخل الناف بار الانهيار سوف يكون تلقائيا خفية ، مثل الحكمة لديك لتعيين css الخاص بك كما كنت التصميم المطلوب.

Answer 2

2018 التحديث

التمهيد 4

تغيير الناف بار توقف أسهل في التمهيد 4 باستخدام navbar-expand-* فصول:

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

• navbar-expand-sm = المتنقلة القائمة على شاشات xs <576px
• navbar-expand-md = المتنقلة القائمة على شاشات sm <768px
• navbar-expand-lg = المتنقلة القائمة على شاشات md <992px
• navbar-expand-xl = المتنقلة القائمة على شاشات lg <1200px
• navbar-expand = أبدا استخدام القائمة النقالة
• (no expand class) = دائما استخدام القائمة النقالة

إذا كنت تستبعد navbar-expand-* القائمة النقالة سيتم استخدامها في all الاعراض.وهنا عرض كل 6 الناف بار الدول: التمهيد 4 الناف بار سبيل المثال

يمكنك أيضا استخدام مخصص نقطة (???px) عن طريق إضافة القليل من CSS.على سبيل المثال, هنا 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 مخصص الناف بار توقف
التمهيد 4 الناف بار توقف أمثلة

---

**التمهيد 3**

من أجل التمهيد 3.3.x هنا العمل CSS لتجاوز الناف بار توقف.تغيير 991px إلى البعد بكسل من النقطة التي تريد الناف بار إلى انهيار...

@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 هنا.

---

Answer 3

في bootstrap3, تغيير هذا المتغير @الشبكة-تطفو-توقف إلى واحد التي تحتاج إليها.القيمة الافتراضية هي 768px

Answer 4

أخيرا عملت على كيفية تغيير انهيار عرض تافه مع '@الشبكة-تطفو-توقف في http://getbootstrap.com/customize/.

انتقل إلى خط 2923 في التمهيد.css(أيضا نسخة دقيقة) وتغيير @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;
  }
}

Answer 5

أنا فقط فعلت ذلك بنجاح من خلال استخدام التالي كود 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;
    }

}

Answer 6

في التمهيد 3 .أقل التعليمات البرمجية المصدر, هناك متغير معرف في 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;

Answer 7

ساس طريقة تغيير التمهيد المتغيرات في الواقع موثقة على التمهيد-ساس الصفحة جيثب.

فقط تعريف المتغيرات قبل @استيراد التمهيد:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

Answer 8

بالإضافة إلى @Skely الإجابة, أن تجعل القوائم المنسدلة داخل navbar العمل أيضا إضافة الطبقات إلى أن تنقضها.النهائي كود رفع الصوت عاليا:

    @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;
        }
    }

رمز العرض

Answer 9

Navbars يمكن الاستفادة منها .الناف بار-toggler, .الناف بار-الانهيار،.الناف بار-توسيع{-sm|-md|-lg|-xl} فصول تتغير عندما محتواها ينهار خلف زر.في تركيبة مع غيرها من المرافق ، يمكنك بسهولة اختيار عرض أو إخفاء عناصر معينة.

بالنسبة navbars التي لم تنهار ، إضافة .الناف بار-توسيع الطبقة في الناف بار.بالنسبة navbars دائما الانهيار ، لا تضيف أي .الناف بار-توسيع الطبقة.

على سبيل المثال :

<nav class="navbar navbar-expand-lg"></nav>

القائمة المحمول يظهر في شاشة كبيرة.

المرجع :https://getbootstrap.com/docs/4.0/components/navbar/

Answer 10

في التمهيد v4, الملاحة يمكن انهار عاجلا أو آجلا باستخدام مختلف الطبقات css

على سبيل المثال:

• الناف بار-و toggleable-sm
• الناف بار-و toggleable-md
• الناف بار-و toggleable-lg

مع زر التنقل:

• مخبأة-sm-up
• مخبأة-md-up
• مخبأة-lg-up

Answer 11

بالنسبة لي فقد عملت 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;
}

Answer 12

من أجل التمهيد 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;
   }
}

Answer 13

سيكون أفضل رهان استخدام ميناء CSS المعالج الذي تستخدمه.

أنا مروحة كبيرة من ساس لذلك أنا استخدم حاليا https://github.com/thomas-mcdonald/bootstrap-sass

يبدو أن هناك شوكة القلم هنا: https://github.com/Acquisio/bootstrap-stylus

وإلا بحث واستبدال هو الخاص بك أفضل صديق في css الإصدار...

Answer 14

مرحبا أعتقد يمكنك أن تفعل ذلك باستخدام 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;
    }
}

Answer 15

هذا هو العمل رمز بالنسبة لي.(أيضا القائمة المنسدلة الناف بار الروابط تعمل)

@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;
  }
}

Answer 16

هذا ما لم خدعة بالنسبة لي:

@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;
}

Answer 17

في التمهيد 4, إذا كنت تريد أن الإفراط في ركوب عندما الناف بار-توسيع-*, يوسع ينهار و يظهر ويخفي همبرغر (الناف بار-toggler) عليك أن تجد هذا النمط/تعريف في التمهيد.css و تعريف في customstyle.css (أو مباشرة في التمهيد.css إذا كنت تميل ذلك).

على سبيل المثال.أردت الناف بار-توسيع-lg أن ينهار ويظهر الناف بار-toggler في 950px.في التمهيد.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 ...
}

أنا نسخت كل من @استفسارات وسائل الإعلام و تمسك لهم في أسلوبي.css, ثم تعديل حجم لتناسب احتياجات بلدي.أنا حالتي أردت أن تنهار في 950px.@في استفسارات وسائل الإعلام يجب أن تحتاج إلى أن تكون أحجام مختلفة (أظن), لذلك أنا وضعت حاوية max-width أن 949.98 px و تستخدم 950px الأخرى @الاستعلام وسائل الإعلام و حتى البرمجية التالية تم إلحاق أسلوبي.css.هذا ليس من السهل ديتانجلي من الملتوية الحلول التي وجدت على ستاكوفيرفلوو وغيرها.ويساعد هذا الأمل.

@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%;
    }
}

Answer 18

هنا العمل في التعليمات البرمجية باستخدام تتفاعل مع التمهيد

<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>

Answer 19

هو الآن معتمد على التمهيد 4.4

navbar-expand-sm