引导站点，我可以让菜单项恢复或看起来正确，但不能两者兼而有之

Question

我正在尝试创建一个菜单，其中登录"用户名/密码/登录"按钮出现在桌面网站上，但在移动响应版本中，我想要一个"登录"选项，将您定向到登录页面。

我使用引导响应.css使登录框不在桌面时消失，这是一种享受，但"登录"菜单项只会响应或看起来格式正确，但不能两者兼而有之

这是代码

    <span class="visible-phone visible-tablet" >
<li class="dropdown">
<li>
<a href="sign_in.html">Sign in</a>
</li>
</li>
</span>

<li class="dropdown visible-desktop">
<div class="form-group">
<form class="form-inline" role="form">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
<button type="submit" class="btn-u btn-u-default">Sign in</button>
<label><h6>Forgot Password?</h6></label>
</form>
</div>
</li>

这将在桌面视图中隐藏菜单，但在手机/平板电脑视图中显示它，但格式已消失，代码的表单部分工作正常

Answer 1

我将"可见手机"和"可见平板电脑"更改为两个单独的条目，这似乎已经奏效了

<li class="dropdown visible-phone">
<a href="page_login.html">Sign in</a>
</li>
<li class="dropdown visible-tablet">
<a href="page_login.html">Sign in</a>
</li>