Более длинная торговая марка выходит извне от навигатора на маленьком экране

Question

Торговая марка Navbar хорошо работает в одной строке, но когда она разбивает более двух строк, название торговой марки выходит из области нефа.

Поэтому я хочу, чтобы эта торговая марка оставалась в области навигатора или спрятала ее при небольшом размере экрана.

Пожалуйста, смотрите ссылку изображение ниже ....

Brand name getting outside from nav area

`<nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 


      <!--responsive menu button --> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 




       <!--menu name--> 
       <a class="navbar-brand" href="#">Taibunnesa Khanom Academy Degree College</a> 



      </div> 


      <!-- main menu items --> 
      <div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#about">About</a></li> 
        <li><a href="#contact">Contact</a></li> 


         <!--droopdown --> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li role="separator" class="divider"></li> 
          <li class="dropdown-header">Nav header</li> 
          <li><a href="#">Separated link</a></li> 
          <li><a href="#">One more separated link</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav>` 

Answer 1

это установит высоту .navbar-brand в auto когда ширина экрана добраться до `768px в ширину.

@media screen and (max-width: 768px){ 
 
    .navbar-brand{ 
 
     height: auto !important; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 

 

 
      <!--responsive menu button --> 
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
        <span class="sr-only">Toggle navigation</span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 

 

 

 

 
       <!--menu name--> 
 
       <a class="navbar-brand" href="#">Taibunnesa Khanom Academy Degree College</a> 
 

 

 

 
      </div> 
 

 

 
      <!-- main menu items --> 
 
      <div id="navbar" class="navbar-collapse collapse"> 
 
       <ul class="nav navbar-nav navbar-right"> 
 
        <li class="active"><a href="#">Home</a></li> 
 
        <li><a href="#about">About</a></li> 
 
        <li><a href="#contact">Contact</a></li> 
 

 

 
         <!--droopdown --> 
 
        <li class="dropdown"> 
 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
         <ul class="dropdown-menu"> 
 
          <li><a href="#">Action</a></li> 
 
          <li><a href="#">Another action</a></li> 
 
          <li><a href="#">Something else here</a></li> 
 
          <li role="separator" class="divider"></li> 
 
          <li class="dropdown-header">Nav header</li> 
 
          <li><a href="#">Separated link</a></li> 
 
          <li><a href="#">One more separated link</a></li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </nav>

Answer 2

Обновление вашего HTML для этого (добавить пользовательский класс)

<a class="navbar-brand custom-brand" href="#">Taibunnesa Khanom Academy Degree College</a> 

Добавьте это в CSS.

@media (max-width: 480px){ 

    .custom-brand{ 
    float: left; 
    width: 160px; 
    overflow: hidden; 
    clear: left; 
    text-align: left; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    } 
} 

Fiddle: http://codepen.io/hunzaboy/pen/gLWozx

Я уверен, что вам понравится это :)