從圖像左側和右側的位置導航

當前不知道如何繼續。我在頁面底部有一個絕對定位的div元素。我想放置一箇中心標誌，並且從想要放置導航的標誌（我正在使用Bootstrap）向左和向右移動。下面是我的想法的形象，你可以得到一個更好的視野：從圖像左側和右側的位置導航

Example

這是我在底部的位置絕對的div代碼。我有點失去了它很快，感謝我能得到的每一個幫助！

<div id="footmenu"> 
    <div class="container navresize"> 
     <nav class="navbar navbar-default" role="navigation"> 
      <div class="container-fluid"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 

       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
        <ul class="nav navbar-nav navleft"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Portfolio</a></li> 
        <li><a href="#">Über uns</a></li> 
        <li><a href="#"></a></li> 
        <a href="index.html"><img src="images/logo.png" /></a> 
        </ul> 


       </div> 
      </div> 
     </nav> 
    </div> 
</div>

CSS：

#footmenu { 
    background:grey; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 150px; 
}

（我刪除了CSS的休息，因爲我敢肯定，這是錯誤的）

再次感謝您的幫助，我很欣賞你的時間！

編輯：現在更新jsfiddle。這裏是一個結果，我發現它顯示了完美的東西我想：http://www.templatemonster.com/demo/39221.html

這裏是的jsfiddle：http://jsfiddle.net/Su6VF/2/embedded/result/

來源

2014-03-29 Evolis

這裏OP：http://jsfiddle.net/Su6VF/ - 根據您的需要 – Ani

我不知道你正在嘗試做的，雖然 – Ani

非常感謝@Ani修改此！我會修改你的。我剛剛找到一個網站，顯示我想要的結果：http://www.templatemonster.com/demo/39221.html雖然我想用bootstrap工作，這是我想要的結果！ – Evolis

您可以inline-block顯示嘗試包含列表項目和標誌和text-align:center到div小號包裝div將它們放置在中間。

入住這FIDDLE

這可以幫助你。下面是使用的樣式

.row{ 
    text-align:center; 
} 

.col-md-4{ 
    display:inline-block; 
    float:none; 
    width:auto; 
}

來源

2014-03-29 19:25:20 James

非常感謝你明天會試試這個！ – Evolis

從圖像左側和右側的位置導航

回答

相關問題