自动调整div的大小

Question

当我使浏览器窗口变小时，以"Open“开头的文本最终占用了几行代码，我无法将下面的所有内容向下推下去。相反，按钮和隐藏，以及主图像被文字阻塞。如何使调整大小自动发生？网站是：http://opensimulationsystems.org/

我试着在工具中的导航栏标题中添加“高度:自动”，但是“自动”不是一个选项。我在使用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类是浮动的。

​

​

修复的一种方法是将媒体查询用于css上的小屏幕，将navbar-brand设置为“不浮动”。就像这样：

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

Answer 2

是float:left使其重叠。对于较小的屏幕大小，可以使用媒体查询应用特定的样式，如

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

Answer 3

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

但是，如果您将height:50px从..navbar品牌中删除，那么它将自动设置所有内容。在媒体查询中，您可以使用.navbar-brand.的宽度进行调整。