給Bootstrap的摺疊導航欄有組織的佈局

我目前有一個帶圖像的自舉導航欄，問題是，當這崩潰時，由於一些自定義邊距和運行在我的文本上的圖像，它變得混亂。給Bootstrap的摺疊導航欄有組織的佈局

有什麼辦法來指定我的導航欄被摺疊時的新樣式或佈局？我寧願一切佈局像

ImageOfHome 
Home (text) 
ImageOfUsers 
Users (text) 
ect...

而是它們都運行在對方。我也想在合攏狀態期間移除懸停效果。

JSFiddle Demo

（縮小視圖倒塌欄出現，當你打開它，你將看到的一切是怎麼都凌亂且在摺疊VEW運行在對方）

這裏是導航欄代碼

<div class="navbar navbar-inverse navbar-fixed-top" style="margin-top:25px"> 
    <div class="container" style="height:5px"> 
     <div class="navbar-header" style="margin-bottom:-80px; padding-bottom:-80px"> 
      <span class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 

      </span> 
      <a href="@Url.Action("Index", "LakerLegends")" style="margin-right:-30px" onclick="return false"> 
       <img src="/Content/img/LogoConstruction.png" alt="Logo" width="275" height="100" style="margin-top:-25px" /> 
      </a> 
     </div> 
     <div class="navbar-collapse collapse pull-right"> 

      <ul class="nav navbar-nav" style="text-align:center"> 
       <li class="rolloverNav"> 

        <a href="@Url.Action("Index", "LakerLegends")" id="navbar"> 
         <img src="~/Content/navbar/homeNew.png" class="urlImage"/> 
         <br /> 
         Home 
        </a> 
       </li> 
       <li> 

        <a href="@Url.Action("Index", "Users")" id="navbar"> 
         <img src="~/Content/navbar/usersNew.png" class="urlImage" /> 
         <br /> 
         Users 
        </a> 
       </li> 
       <li> 

        <a href="@Url.Action("Index", "Events")" id="navbar"> 
         <img src="~/Content/navbar/eventsNew.png" class="urlImage" /> 
         <br /> 
         Events 
        </a> 
       </li> 
       <li> 

        <a href="@Url.Action("Index", "Competitive")" id="navbar"> 
         <img src="~/Content/navbar/competitiveNew.png" class="urlImage" /> 
         <br /> 
         Teams 
        </a> 
       </li> 
       <li> 

        <a href="@Url.Action("Index", "Streams")" id="navbar"> 
         <img src="~/Content/navbar/streamsNew.png" class="urlImage" /> 
         <br /> 
         Streams 
        </a> 
       </li> 
       <li> 

        <a href="@Url.Action("Index", "Staff")" id="navbar"> 
         <img src="~/Content/navbar/staff.png" class="urlImage"/> 
         <br /> 
         Staff 
        </a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div>

這裏是我的CSS它

.rolloverNav { 
    padding-bottom:0px; 
} 

a#navbar:hover { 
    color:#f1fe51; 
    margin-top:-10px; 
    opacity: 1; 
} 


a#navbar { 
    opacity:1; 
    padding-top:0px; 
    padding-bottom:0px; 
    font-weight:bold; 
    font-family: 'Fjalla One', sans-serif; 
    font-size:14px 
} 

.urlImage { 
    height:40px; 
    width:40px; 
    margin-top: -5px; 
    padding-bottom: 0px; 
}

一直在尋找使用@media等，但似乎沒有影響CSS。：/

來源

2014-07-23 Austin

這裏有一些簡單的改變讓它看起來有點可敬：

1）加一點餘量的你<li>元素在你的資產淨值。

.nav li { 
    margin: 10px 0px; 
}

2）包裝在媒體查詢，僅允許其在768px和更高的運行懸停，所以當你的菜單倒了都不會被應用。

@media (min-width: 768px) { 
    a#navbar:hover { 
     color:#f1fe51; 
     margin-top:-10px; 
     opacity: 1; 
    } 
}

Update JSFiddle

編輯：

你有一塊是保持你的菜單坍塌掉落的菜單按鈕的下方內嵌造型。

此：

<div class="navbar-header" style="margin-bottom:-80px; padding-bottom:-80px">

需求是這樣的：

<div class="navbar-header">

New JSFiddle

來源

2014-07-23 13:43:51 Tricky12

我想這一點，但無論我在媒體內包裝似乎並不重要，它適用在未摺疊時也是如此。如果你看小提琴，按鈕仍然坐在摺疊的圖標上，我想把它們推下。但是，當我嘗試在該媒體標記中添加任何邊距時，它在未摺疊時也會在整個導航欄中留有餘量。有道理？當它摺疊時，看看小提琴的右邊，你會看到「家」是如何運行在導航欄圖標上。謝謝你到目前爲止！ – Austin

您的標題中是否有視口元標記？ ''如果您的媒體查詢不起作用。 – Tricky12

我相信，這是在我的layout.cshtml'' – Austin

您可以創建自己的CSS覆蓋白手起家CSS和使用引導程序也使用媒體查詢它們是：

/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Bootstrap */ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-sm-min) { ... } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-md-min) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-lg-min) { ... }

修改了正常的CSS：

/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Bootstrap */ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @768px) { ... } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @992px) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @1200px) { ... }

來自： http://getbootstrap.com/css/#grid-media-queries

你的jsFiddle是abit凌亂的圖像，而不是加載等方式。

來源

2014-07-23 13:41:25

給Bootstrap的摺疊導航欄有組織的佈局

回答

相關問題