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

Question

我的网站编码经验有限.我正在尝试将bootstrap实现到我的网站中,特别是通过使用它创建一个导航栏.它工作得很好,除了当我点击下拉菜单的登录按钮时,菜单对于内容来说太宽了.我使用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 样式规则并删除了它们 - 所以实际上只有 bootstrap 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