我有有限的网站编码经验。我正在尝试将bootstrap实现到我的站点中,特别是通过使用它创建一个navbar。它的工作很好,除了当我舔下拉菜单的登录按钮,菜单显得太宽的内容。我使用css样式表将用户名和密码表单对齐到下拉菜单的右侧,但表单的左侧仍然有太多空格。
例如,我更希望它减少到“新闻通讯”按钮的开头。
站点可以在这里找到:my_test_site
代码:
<li><a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Login <b class = "caret"></b></a>
<div class = "dropdown-menu dropdown-menu-right">
<div class="container">
<form class="form-inline" role="form" id="username">
<div class="form-group">
<label for="username">Username:</label>
<input type="username" class="form-control" id="email" placeholder="username">
</div>
<div class="form-group" id="password">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</li>
</ul>
这里有一个问题的解决方案,如何固定引导菜单的内容?
它没有按照要求使用单行格式和减少空格,原因如下:
即使您减少了包含登录表单的下拉面板的宽度,表单在移动视图中的呈现也不正确,例如,如果您在my_test_site演示中将浏览器缩小到移动大小,然后尝试使用表单,您就会明白我的意思。
style=“padding:10px;”
在包装窗体的div上你该走了!
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<!-- Begin custom dropdown menu -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>
<!-- begin custom form -->
<div style="padding: 10px;"
<form class="form-inline" role="form" id="username">
<div class="form-group">
<label for="username">Username:</label>
<input type="username" class="form-control" id="email"
placeholder="username">
</div>
<div class="form-group" id="password">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- end custom form -->
</li>
</ul>
</li>
<!-- Begin custom dropdown menu -->
</ul>
</div><!-- /.navbar-collapse -->
下面是一个正在工作的演示-http://jsbin.com/lineketuru/1/edit?html,output