使用 zurb 基础的顶部导航登录表单

Posted 2023-02-19

【中文标题】使用 zurb 基础的顶部导航登录表单

【英文标题】：Login form on top nav with zurb foundation

【发布时间】：2012-11-19 18:17:18

【问题描述】：

我已经学习了引导程序，但我正在尝试为不同的项目学习基础知识，只是为了了解它。我想知道是否有任何简单的方法可以将用户名/密码表单添加到顶部导航栏，类似于 bootstrap 的做法？我在这里查看了名为工作区的模板：http://foundation.zurb.com/page-templates/workspace.html，它在顶部有一个搜索框，看起来与我想要的非常相似，但是当我在它周围包裹一个表单时，它就乱了套。有人知道如何在基础中做到这一点吗？

我正在尝试使用的内容：

<nav class="top-bar contain-to-grid">
    <ul>
      <li class="name"><img src="/images/betalogo.jpg"></li>
      <li class="toggle-topbar"><a href="#"></a></li>
    </ul>

    <section>
      <ul class="left">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
      </ul>

      <ul class="right">
        <li>
              <input type="text">
        </li>
        <li>
              <input type="password">
        </li>

        <li class="has-button">
          <input type="submit" class="small button" value="Log In">
        </li>
      </ul>
    </section>
</nav>

【参考方案1】：

尝试将每个列表项包装在一个列中。

    <ul class="right">
        <div class="column">
        <li class="username"><form><input type="text" placeholder="Username" /></li></div>
        <div class="column">
        <li><input type="password" placeholder="Password"></li></div>
        <div class="column">
        <li class="has-button"><a class="small button" href="#">Login</a></form></li></div>
    </ul>

【参考方案2】：

从源头...

<ul class="right">
  <li class="search">
    <form>
      <input type="search">
    </form>
  </li>

  <li class="has-button">
    <a class="small button" href="#">Search</a>
  </li>
</ul>

这将为您提供所需的 UI，但不一定是功能。我发现这个问题是提交按钮在表单之外——因此没用；除非您使用一些 JS 将按钮粘贴到表单上，坦率地说，这会破坏 K.I.S.S。

或者，您可以在表单中使用新行。感谢 Foundation 的行嵌套。请务必.collapse该行是您希望按钮位于搜索栏旁边；省略它以保持列之间的间距。

【参考方案3】：

我知道这是一个旧线程，我相信您现在已经想通了，但也许其他人可以使用答案。

<!-- Right Nav Section -->

ul class="right">
  <li class="divider hide-for-small"></li>
  <li class="active"><a href="#">Artists</a></li>
  <li class="divider"></li>
  <li class="active"><a href="#">Shows</a></li>
  <li class="divider"></li>
  <li class="active"><a href="#">Radio</a></li>
  <li class="divider"></li>
  <li class="active"><a href="/responsive/blog/">Blog</a></li>
  </li>
  <li class="divider"></li>
  <?php if(empty($_SESSION['user_id'])) ?>
  <li class="has-form signinform">
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
      <div class="row collapse">
        <div class="columns username">
          <input type="text" placeholder="Username" name="username">
        </div>
        <div class="columns password">
          <input type="text" placeholder="Password" name="password">
        </div>

      </div>

    </li>
    <input type="submit" value="Login" name="login" class="button">
</form>
<?php  
######end show login######
?>
</ul>

这只是我页面的过去，但是您可以查看是否需要在其中放置表单，您必须在 li 标签中使用“has-form”类

【讨论】：

我实际上提交了一个拉取请求并且他们合并了它：github.com/zurb/foundation/pull/1239 - 不幸的是它在 4.0 中被删除了