登录表单在顶部导航与zurb基础

Question

我已经学会了自举，但我正在尝试为不同的项目学习基础，只是为了接触它。我想知道是否有任何简单的方法将用户名/密码表单添加到顶部导航栏，类似于bootstrap的工作方式？我在这里检查了名为workspace的模板：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>

Answer 1

从源头......

<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行，你想要按钮在搜索栏旁边;省略这一点以保持列之间的沟槽。

Answer 2

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

<!-- 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”类

Answer 3

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

    <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>