提问者:小点点

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


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

共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