How to trim Bootstrap dropdown menus to fit contents?

Question

I have limited website coding experience. I'm trying to implement bootstrap into my site, specifically by creating a navbar with it. It is working great except for when I lick the login button for the dropdown menu, the menu appears far too wide for the content. I used a css stylesheet to align the username and password forms to the right of the dropdown menu but there is still too much whitespace to the left of the forms.

For instance, I would much rather it trim down to the beginning of the 'newsletters' button.

Site can be found here: my_test_site

Code:

            <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

The Class dropdown-menu has a min-width attribute.
min-width: 10rem;.

just override it with.
min-width: 1rem;

Answer 2

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