Ответы пользователя по тегу Bootstrap
  • Как сделать navbar который уменьшается при уменьшение страницы?

    @qqNemo
    Не решение, но хороший пример. Поменьше статики в размерах
    .nav-item a { font-size:100%; }
    @media (min-width: 576px) { .nav-item a {font-size:0.7rem!important;} .nav-item {margin-right: 1vw!important;} .nav-link {padding: 0.5rem 0.3rem !important;}}
    @media (min-width: 650px) { .nav-item a {font-size:0.7rem!important;} .nav-item {margin-right: 1.25vw!important;}.nav-link {padding: 0.5rem 0.5rem !important;}}
    @media (min-width: 768px) { .nav-item a {font-size:0.8rem!important;} .nav-item {margin-right: 1.5vw!important;} .nav-link {padding: 0.5rem 0.5rem !important;}}
    @media (min-width: 992px) { .nav-item a {font-size:0.9rem!important;} .nav-item {margin-right: 1.75vw!important;}}
    @media (min-width: 1200px) { .nav-item a {font-size:1rem!important;} .nav-item {margin-right: 2.25vw!important;}}
    
    .nav {
        margin: 0 auto;
    }
    
    
    .nv-block a, .nv-block span {
        text-decoration: none;
        color: white;
    }
    
    .nv-block a:hover, .nv-block span:hover {
        background-color: rgba(0, 0, 0, 0.116) ;
        border-radius: 30px;
    }
    
    .nv-block .actives {
        background-color: rgba(0, 0, 0, 0.116) ;
        border-radius: 30px;
    }


    <nav class="navbar navbar-expand flex-column flex-sm-row" style="background-color: #4d77a9;">                                          
      <div class="collapse justify-content-center navbar-collapse" id="navbarNav">                                                         
        <a class="navbar-brand" style="margin-right: 50px;" href="#">                                                                      
          <img src="./images/vkbonus.png" height="60" class="d-inline-block align-text-top">                                               
        </a>                                                                                                                               
        <ul class="nav nav-pills flex-column flex-sm-row">                                                                                 
          <li class="nav-item nv-block">                                                                                                   
            <a class="nav-link flex-sm-fill text-sm-center small-font actives" aria-current="page" href="#">заработать баллы</a>           
          </li>                                                                                                                            
          <li class="nav-item nv-block">                                                                                                   
            <a class="nav-link flex-sm-fill text-sm-center small-font" aria-current="page" href="#">мои задания</a>                        
          </li>                                                                                                                            
          <li class="nav-item nv-block">                                                                                                   
            <a class="nav-link flex-sm-fill text-sm-center small-font disable"  aria-current="page" href="#">онлайн-бот</a>                
          </li>                                                                                                                            
          <li class="nav-item nv-block">                                                                                                   
            <a class="nav-link flex-sm-fill text-sm-center small-font" aria-current="page" href="#">аукцион</a>                            
          </li>                                                                                                                            
          <li class="nav-item nv-block">                                                                                                   
            <a class="nav-link flex-sm-fill text-sm-center small-font" aria-current="page" href="#">топ-100</a>                            
          </li>                                                                                                                            
        </ul>                                                                                                                              
        <div class="nv-block">                                                                                                             
          <a href="#" class="nv-block small-font">                                                                                         
            RU</a>                                                                                                                         
          <a href="#" class="nv-block small-font">                                                                                         
            EN                                                                                                                             
          </a>                                                                                                                             
        </div>                                                                                                                             
        <a class="navbar-brand" style="margin-right: 50px;" href="#">                                                                      
          <img src="./images/menu3.png" height="50px" class="d-inline-block ml-4 align-text-top">                                          
        </a>                                                                                                                               
      </div>                                                                                                                               
    </nav>


    А белая полоска скрола появляется из-за размера ширины у родителя
    Ответ написан