Question

大家好我正在使用基础框架来构建固定导航

我的HTML如下

<div class="fixed">
            <div class="contain-to-grid">
                <nav class="top-bar">
                    <ul class="title-area">
                        <li class="name hide-for-medium-up"><h1><a href="#">topbar</a></h1></li>
                        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                    </ul>                       

                    <div class="top-bar-section">
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">about</a></li>
                            <li><a href="#">services</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>

我的问题是： - 我需要删除大型设备的标题区域，并且需要将顶部条形区域水平居中我通过添加hide-for-medium-up类来移除h1标签，但我无法将龙头放在中心位置 - 酒吧节。通过将左侧或右侧类应用于顶栏部分的ul标签，可以将此部分向左或向右对齐。但我没有找到一种方法来集中它我使用了以下sass规则。但它没有用

.top-bar-section {
  text-align: center;
  margin: 0 auto;
  ul {
     li {
       a {
         font-size: emCalc(14px);
         font-weight: 400;
       }
     }
  }
}

Answer 1

您需要一些媒体查询来实现这一目标。

基金会没有为简单的媒体查询操作提供任何便利，因此我建议使用Breakpoint Slicer。

@import "foundation";
@import "breakpoint-slicer";

// For large devices only
@include from(4) {

  // Removing the title area for large devices
  .title-area {
    display: none;
  }

  // Centering the menu
  .top-bar-section {
    text-align: center;
    margin: 0 auto;
    ul {
      li {
        display: inline-block;
        a {
          font-size: emCalc(14px);
          font-weight: 400;
        }
      }
    }
  }

}

另请注意li { display: inline-block; }。

演示：http://sassbin.com/gist/5780699/（使用渲染页面面板的宽度播放）。

Answer 2

这是我发现适用于所有调整大小事件的最佳解决方案。它以Foundation 5 Top-bar元素为中心。

请注意，“包含到网格”div类会将顶栏导航的宽度保持在网站的框架内，但实际上并不会使导航元素居中。

以下代码可以。

SCSS：

nav.top-bar:not(.expanded) {
            text-align: center;
            section.top-bar-section { display: inline-block; }
                           }

HTML：

<div class="contain-to-grid">
    <nav class="top-bar" data-topbar>
        <ul class="title-area">
            <li class="name">
                <h1><a href="#"></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>
                <li><%= link_to 'LINK 1', root_path %></li>
                <li class="divider"></li>
                <li><%= link_to 'LINK2', link_path %></li>
                <li class="divider"></li>
                <li class="has-dropdown">
                    <%= link_to 'Dropping', "#" %>
                    <ul class="dropdown">
                        <li><label>Label:</label></li>
                        <li><%= link_to 'DROP 1', drop_path %></li>
                        <li class="divider"></li>
                        <li><%= link_to 'DROP 2', drop_path %></li>
                    </ul>
                </li>
            </ul>
        </section>
    </nav>
</div>

中心zurb基础固定顶杆链接

2 个答案: