Q: Bootstrap 3 - How can I make dropdown menu occupy menu full width? i have this code:
<nav class="navbar navbar-inverse">
<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="glyphicon my-icon"></span>
    </button>
</div>
<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li>
            <a href="#">value</a>
        </li>
        <li class="dropdown">
            <ul class="dropdown-menu row">
                <div class="col-xs-12">
                    <li>
                        <a href="#">value</a>
                    </li>
                    <li>
                        <a href="#">value</a>
                    </li>
                </div>
            </ul>
        </li>
    </ul>
</div>  


As you can see, it's a pretty standard Bootstrap menu.
I would like the submenus to fill the entire menu width but I haven't been successful.
I have this:

I want this:

Thanks in advance!

A: Here is your solution
/* CSS used here will be applied after bootstrap.css */
.nav { margin-bottom: 0; }
.nav > li.dropdown.open { position: static; }
.nav > li.dropdown.open .dropdown-menu {display:table; width: 100%; text-align: center; left:0; right:0; }
.dropdown-menu>li { display: table-cell; }

And here is your Demo
