How to get rid of space between my dropdown in Bootstrap - css

Question

My application has 6 dropdowns
This is the code for two of them,(note: i wrapped everything in container1 class,at the start of the code.
<div class="container1">
<div class="row">
<div class="col-sm-2 col-xs-4">
<div class="btn-group" role="group" aria-label="...">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria- expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div class="btn-group" role="group" aria-label="...">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
As you see i wrapped everything in a class called container1,it is made by be.
Here is what my class container1 has
.container1 {
margin-right: 200px;
margin-left: 200px;
}
And it works like magic,this is what i get(as you see the space between them is smaller)
Question: My method works well,but it is not responsive,when i make my browser screen smaller.This is what i get
but if i leave it as it is with default bootstrap,with this big space between them,i get an awesome responsiveness.
How would you make the space between dropdowns smaller,and in the same time leave the dropdown to remain responsive as bootstrap by default does,for small devices.
Thank you for your time.

Answer 1

I think the problem with the responsivness comes from .container1 class which decreases the width that col-**-** classes use. If you want your dropdown menus to be in the center of the .row div, use add text-align: center; in the .row div and remove the margin-right: -15px; and margin-left: -15px; from the .row (you can create custom class .margin-ignore { margin: 0 !important; } and add it to the .row div. Also, replace col-xs-4 with col-xs-6 because the dropdown buttons have bigger width that col-xs-4 in some cases. The final result may look like this:
JSFiddle: https://jsfiddle.net/0n8xmy7a/2/
Try resize the screen and look does it fit for you.
If you still does not like how and when the dropdown menus take their new position you can write your own column grid class and there write explicitly the width of screen when the class to trigger and the width of the elements that hold this class.
Good luck!

Answer 2

Instead on using margins, you could use max-width to keep the buttons close together on large screens.
.container1 {
max-width: 800px;
margin: 0 auto;
}