3

我遇到了无法使左侧导航栏具有固定宽度的问题，同时不仅使顶部栏，而且使侧面导航栏具有粘性。

我尝试了所有的谷歌结果和我能找到的所有 stackoverflow 提示，但仍然没有运气。

我的 HTML：

    <!-- Navigation bar -->
<div class="sticky">
    <nav class="top-bar">
            <ul class="title-area">
            <!-- Title Area -->
            <li class="name"><h1><a href="#"><img src="img/logo.png"> </a></h1></li>
            <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
            </ul>
<section class="top-bar-section">
         <ul class="left"></ul>
         <ul class="right">
           <li class="has-form">
              <form>
                  <div class="row collapse">
                      <div class="small-8 columns">
                      <input type="text" name="searchfield">
                      </div>
                      <div class="small-4 columns">
                      <a href="#" class="tiny button">Search</a>
                      </div>
                 </div>
             </form>
           </li>
         </ul>
    </nav>
</section>
</div>

<!-- Main content -->
 <!-- Nav Sidebar -->
<div class="row">
        <div class="large-2 columns">
            <div class="ad">
                      <ul class="side-nav"> 
                                  <li><a class="tnav" href="#">Nachrichten</a></li>
                                  <li><a class="tnav" href="#">Kultur</a></li>
                                  <li><a class="tnav" href="#">Wirtschaft</a></li>
                                  <li><a class="tnav" href="#">Sport</a></li>
                                  <li><a class="tnav" href="#">Wissenschaft</a></li>
                                  <li><a class="tnav" href="#">Englisch</a></li>
                                  <li><a class="tnav" href="#">Technologie</a></li>
                      </ul>   
            </div>    
    </div>
<!-- Start Tiles -->
<div id="tiles" class="large-10 columns"s></div>
</div>

我的代码在这里：http: //jsfiddle.net/TPbhD/2/

在此处查看预览：http: //jsfiddle.net/TPbhD/2/embedded/result/

想法模板：

想法模板

4

0 回答 0