4

我已经学习了引导程序，但我正在尝试为不同的项目学习基础知识，只是为了接触它。我想知道是否有任何简单的方法可以将用户名/密码表单添加到顶部导航栏，类似于 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>
4

3 回答 3

0

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

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

于 2013-11-14T17:36:16.233 回答
0

从源头上……</p> 

<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 将按钮粘贴到坦率地说会破坏KISS的表单上。

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

于 2013-07-08T11:01:29.563 回答
-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>
于 2012-12-02T05:55:55.573 回答