自动调整div

Question

当我使浏览器窗口变小时，以“打开”开头的文本最终会占用几行而我无法将下面的所有内容推到较低位置。相反，按钮和隐藏，以及主图像被文本阻止。如何自动调整大小？该网站是：http://opensimulationsystems.org/

我尝试在Chrome开发者工具的navbar-header中添加“height：auto”，但“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元素样式，则必须使用填充和其他所有内容重新设置标题。

但如果您从.navbar-brand中删除height:50px，则会自动设置所有内容。在媒体查询中，您可以使用.navbar-brand.

的宽度进行调整