自动调整div的大小

当我将浏览器窗口变小时，以“Open”开头的文本最终占用了多行，而我无法得到下面的所有内容都被压低。相反，按钮和隐藏，主图像被文本阻止。我如何才能自动调整大小？该网站是：http://opensimulationsystems.org/自动调整div的大小

我曾尝试在Chrome开发人员工具中向导航栏标题添加“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>

来源

2015-05-16 user994165

您可以发布相关的CSS吗？ –

我并不积极，但最近我一直在研究名为rem的大小属性，我的好奇心是它在调整窗口大小时调整大小，如果不是，您可以使用媒体查询进行调整。 – EasyBB

建议：如果您希望人们能够在小屏幕上查看网站，也许您应该缩短网站标题或使用较小的字体。 – BSMP

这是怎么回事，因为navbar-brand类是浮动的。固定

enter image description here

一种方法是使用在你的CSS小屏幕一media query，设置navbar-brand不浮动。事情是这样的：

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

来源

2015-05-16 03:12:47 alebruck

这是使float:left重叠。对于较小的屏幕尺寸，你可以将特定的样式media查询，如

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

来源

2015-05-16 03:08:33 AmmarCSE

如果将删除.navbar-brandfloat:left元素的风格，那么你必须与填充和其他所有的东西重新设定你的头。

但是，如果您从.navbar品牌中删除height:50px，那么它会自动设置所有的东西。在媒体查询中，您可以调整宽度为.navbar-brand.

来源

2015-05-16 06:13:19

自动调整div的大小

回答

相关问题