Bootstrap站点,我可以让菜单项响应或看起来正确但不是两者

时间:2014-11-27 14:20:42

标签: html css twitter-bootstrap

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

我已经使用了bootstrap-responsive.css来使登录框在不在桌面时消失,但是“登录”菜单项只会响应或看起来格式正确但不能同时< / p>

这是代码

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

这将在桌面视图中隐藏菜单,但在移动/平板电脑视图中显示,但格式化已完成,代码的表单部分工作正常

1 个答案:

答案 0 :(得分:0)

我将“可见电话”和“可见平板电脑”改为两个单独的条目,这似乎已经有效了

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