Html 自动调整div的大小

当我把浏览器窗口变小时，以“Open”开头的文本会占据几行，我无法将下面的所有内容向下推。相反，按钮和按钮被隐藏，主图像被文本阻止。如何自动调整大小？该网站是：

我试着在Chrome开发者工具中将“高度：自动”添加到导航栏标题中，但是“自动”不是一个选项。我正在使用引导主题模板

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

切换导航

正是

浮动：左

使其重叠。对于较小的屏幕尺寸，您可以通过以下查询应用特定样式

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

---

使其重叠的是

浮动：left

。对于较小的屏幕尺寸，您可以通过以下查询应用特定样式

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

---

这是因为

navbar品牌
类是浮动的


一种修复方法是在css的小屏幕上使用a，将
navbar brand
设置为不浮动。大概是这样的：

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

这是因为
navbar品牌
类是浮动的


一种修复方法是在css的小屏幕上使用a，将
navbar brand
设置为不浮动。大概是这样的：

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

如果要从
.navbar brand
中删除
float:left
元素样式，则必须使用填充和所有其他内容重新设置标题

但是如果您从.navbar品牌中删除
height:50px
，那么它将自动设置所有内容。在“媒体查询”中，您可以调整
.navbar brand的宽度。
如果要从
.navbar brand
中删除
float:left
元素样式，则必须使用填充和所有其他内容重新设置标题

但是如果您从.navbar品牌中删除
height:50px
，那么它将自动设置所有内容。在媒体查询中，您可以调整
.navbar brand的宽度。
您可以发布相关CSS吗？我不确定，但最近我一直在学习称为rem的大小属性，我的curousity是这样的，它在调整窗口大小时会调整大小，如果没有，您可以使用媒体查询。建议：如果您希望人们能够在小屏幕上查看网站，也许你应该缩短网站标题或使用较小的字体。你能发布相关的CSS吗？我不确定，但最近我一直在学习称为rem的大小属性，我的curousity是指在调整窗口大小时它会调整大小。如果不这样做，您可以使用媒体查询。建议：如果您希望人们能够在小屏幕上查看网站，也许您应该缩短网站标题或使用较小的字体。