Автоматическое изменение размера div

Question

Когда я делаю окно моего браузера маленьким, текст, начинающийся с «Open», заканчивается тем, что занимает несколько строк, и я не могу получить все ниже, чтобы быть опущенным ниже. Вместо этого кнопки и скрытые, а главное изображение блокируется текстом. Как я могу получить изменение размера автоматически? На сайте есть: http://opensimulationsystems.org/

Я попытался добавить «height: auto» в заголовок navbar в инструментах разработчика Chrome, но «auto» не является вариантом. Я использую шаблон шаблона Bootstrap.

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <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> 
      <a class="navbar-brand" href=".">Open Simulation Systems: The Common Agent-Based Simulation Framework (CABSF) & The Agent and Simulation Repository</a> 

Answer 1

, что происходит, потому что navbar-brand класса плавает.

Один из способов крепления, что использует media query для маленьких экранов на вашем CSS, устанавливая navbar-brand не всплывают. Что-то вроде этого:

@media screen and (max-width: 700px){ 
    .navbar-brand { 
    float: none; 
    } 
} 

Answer 2

Это float:left, что делает его совпадающим. Для меньших размеров экрана, вы можете применить определенные стили с media запросов как

@media (max-width: 500px) { 
     .navbar-brand { 
      float: none; 
      height:auto; 
     } 
} 

Answer 3

Если вы удалите float:left стиль элемента из .navbar-brand, то вы должны установить заголовок снова с подкладкой и все другие вещи.

Но если вы удалите height:50px из .navbar-brand, тогда он автоматически установит все. И в запросе СМИ вы можете настроить ширину .navbar-brand.