Küçülüyorsa bölücü özelleştirin

Question

Navbarım daraltıldığında bölücü büyüktür. Nasıl özelleştirebilirim veya düzenleyebilirim? Lütfen bana yardım et, css ve html için de bootstrap için yeniyim. Şimdiden teşekkürler. Önyükleme kullanıyorum.

İşte benim kod.

 <div class="collapse navbar-collapse" id="nav-collapse"> 

      <ul class="nav navbar-nav"> 
       <li class="active"><a href="index.html">Students</a></li> 
       <li class="nav-divider"></li> 
       <li><a href="#">Faculty</a></li> 
       <li class="nav-divider"></li> 
       <li><a href="#">About us</a></li> 
       <li class="nav-divider"></li> 
       <li><a href="#">Contact us</a></li> 
       <li class="nav-divider"></li> 

      </ul> 

       <ul class="nav navbar-nav navbar-right"> 
        <li><a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
        <!-- Modal --> 
         <div id="myModal" class="modal fade" role="dialog"> 
          <div class="modal-dialog"> 
        <!-- Modal content--> 
          <div class="modal-content"> 
           <div class="modal-header"> 
            <button type="button" class="close" data-dismiss="modal">&times;</button> 
            <h4 class="modal-title">Modal Header</h4> 
           </div> 
           <div class="modal-body"> 
            <p>Some text in the modal.</p> 
           </div> 
           <div class="modal-footer"> 
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
           </div> 
          </div> 
          </div> 
         </div> 
      </ul> 
     </div> 

    </div> 
</nav> 

burada benim css kodu

.

#fot { 
    position:fixed; 
    bottom:0; 
} 
.navbar-default { 
    background-color:rgb(193,57,45); 
} 
.navbar .nav > li > a { 
    color:#ffe6e6; 
} 
.navbar .nav > li > a:hover { 
    color:#000000; 
} 
.navbar .nav .active > a{ 
    background-color:rgb(193,57,45); 
    color:#000000; 
} 
.navbar .nav .active > a:hover{ 
    background:none; 
    color:#fff; 
} 
.nav .nav-divider{ 
    height: 50px; 
    margin: 0 10px; 
    border-right: 1px solid #a92419; 
    border-left: 1px solid #c1392d; 
} 
.nav .nav-divider { 
    height: 50px; 
    margin: 0 10px; 
    border-right: 1px solid #a92419; 
    border-left: 1px solid #c1392d; 
} 

Answer 1

gezinme çubuğu altındaki sınır bootstrap aşağıdaki CSS kuralı tarafından renkli görünüyor: Bu kuralı geçersiz olabilir

.navbar-default .navbar-collapse, .navbar-default .navbar-form { 
    border-color: #e7e7e7; 
} 

o genişlik veya renk değiştirmek için.

Answer 2

CSS stilinizi çeşitli görünümlerde ayarlamak için Ortam Sorgusu'u kullanabilirsiniz. Bu yöntem, Bootstrap'te düzeninizi oluştururken hemen hemen her şeyle birlikte kullanışlı hale gelir.

aşağıdaki gibi

: CSS'nizde altına

@media (max-width: 768px) 
{ 
    .navbar-default { 
     background-color: #fff; 
     color: #000; 
     padding: 5px; 
    } 
} 

Place Bu ve size gezinme çubuğu her tarzı ayarlayabilirsiniz. @media'da CSS'ye, o medya sorgusunun içine koyduğunuz stilleri ne zaman uygulayacağını söylersiniz. Değer max-width: 768px iken, yalnızca ekranınızın viewport/size değeri bu değerin altında olduğunda etkili olur. Bunun yerine min-width olarak değiştirirseniz, .navbar-default'u diğer her yere göre biçimlendirir, ancak mobil görünüm dediğimizde varsayılan olarak sıfırlanır.