How to trim Bootstrap dropdown menus to fit contents?

Here is a solution to the question of How to fix bootstrap menu into contents?

It doesnt use the single line format and reduce the whitespace specifically as requested, and heres why:
Even if you reduced the width of the dropdown panel containing the signin form , the form wasn't rendering properly in mobile view, e.g. you will see what I mean if you reduce the browser down to mobile size in your my_test_site demo, and then try to use the form .

How does my version work?

• By changing bootstrap in the minimum way, my version works in both full width and mobile (as far I have tested anyway)
• Also, I saw your CSS style rules and removed them - so there is really only bootstrap CSS + plus this inline style rule style="padding: 10px;" on the div wrapping your form
• So basically
  • remove your style rules
  • Drop in the below code
  • Change the content of the code

And you should be go to go!

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

Here is a working demo - http://jsbin.com/lineketuru/1/edit?html,output