如何修剪引导下拉菜单以适应内容？

Question

我有有限的网站编码经验。我正在尝试将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>

Answer 1

这里有一个问题的解决方案，如何固定引导菜单的内容？

它没有按照要求使用单行格式和减少空格，原因如下:
即使您减少了包含登录表单的下拉面板的宽度，表单在移动视图中的呈现也不正确，例如，如果您在my_test_site演示中将浏览器缩小到移动大小，然后尝试使用表单，您就会明白我的意思。

• 通过以最小的方式更改引导程序，我的版本可以在全宽和移动环境下工作（就我所测试的而言）
• 而且，我看到了您的CSS样式规则，并将其删除--因此实际上只有引导CSS+加上这个内联样式规则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