自動調整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的大小

回答

相關問題