When clicking bootstrap drop down, all elements in div shifts to center - html

Question

https://jsfiddle.net/vp1rrrLt/
Surely this is some problem with Flexbox, but I am not sure how to correct this.
I am going to attempt the same results with block and floating.
<form id="software-flex-container">
<div class="container-software-info">
<div class="dropdown" id="dropdown-flex-container">
<label class="computer-labels">LABEL</label>
<button class="btn btn-secondary dropdown-toggle" type="button" id="vm-drop-bar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Click Me! <i class="fa fa-chevron-down"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="dropdown-item vm-drop">Stuff</div>
<div class="dropdown-item vm-drop">Stuff</div>
<div class="dropdown-item vm-drop">Stuff</div>
</div>
</div>
</div>
</form>
.container-software-info {
width: 100%;
}
#dropdown-flex-container {
display: flex;
justify-content: space-between;
width: 100%;
}

Answer 1

Use !important in the following style. The styles of the dropdown are overriding your styles when dropdown is opened
#dropdown-flex-container {
display: flex !important;
justify-content: space-between;
width: 100%;
}
#software-flex-container {
display: flex;
justify-content: space-between;
width: 75%;
}
.container-software-info {
width: 100%;
}
#dropdown-flex-container {
display: flex !important;
justify-content: space-between;
width: 100%;
}
/*Center text/buttons*/
.dropdown {
float: center;
width: 200px;
text-align: center;
padding: 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form id="software-flex-container">
<!---Software choices------->
<!-- -->
<div class="container-software-info">
<div class="dropdown" id="dropdown-flex-container">
<label class="computer-labels">Adobe CC</label>
<button class="btn btn-secondary dropdown-toggle" type="button" id="adobeCC-drop-bar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
No change <i class="fa fa-chevron-down"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="dropdown-item adobeCC-drop">Yes</div>
<div class="dropdown-item adobeCC-drop">No</div>
</div>
</div>
<!-- -->
<div class="dropdown" id="dropdown-flex-container">
<label class="computer-labels">Stata</label>
<button class="btn btn-secondary dropdown-toggle" type="button" id="stata-drop-bar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
No change <i class="fa fa-chevron-down"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="dropdown-item stata-drop">SC</div>
<div class="dropdown-item stata-drop">IC</div>
<div class="dropdown-item stata-drop">IL</div>
</div>
</div>
<!-- -->
<div class="dropdown" id="dropdown-flex-container">
<label class="computer-labels">VM Software</label>
<button class="btn btn-secondary dropdown-toggle" type="button" id="vm-drop-bar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
No change <i class="fa fa-chevron-down"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="dropdown-item vm-drop">Parallels</div>
<div class="dropdown-item vm-drop">VMWare</div>
<div class="dropdown-item vm-drop">VirtualBox (Free)</div>
</div>
</div>
<!-- -->
<!--Correct later. Change name convention from drop to field for better understanding--->
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer 2

this code will work:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-md-4 col-xs-4 col-xl-4 text-center">adobe CC</div>
<div class="col-sm-4 col-md-4 col-xs-4 col-xl-4 "></div>
<div class="col-sm-4 col-md-4 col-xs-4 col-xl-4 ">
<select>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4 col-xs-4 col-xl-4 text-center">Stata</div>
<div class="col-sm-4 col-md-4 col-xs-4 col-xl-4 "></div>
<div class="col-sm-4 col-md-4 col-xs-4 col-xl-4 ">
<select>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4 col-xs-4 col-xl-4 text-center">VM software</div>
<div class="col-sm-4 col-md-4 col-xs-4 col-xl-4 "></div>
<div class="col-sm-4 col-md-4 col-xs-4 col-xl-4 ">
<select>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</div>
</div>
</div>
fiddle:https://jsfiddle.net/gLzgedp8/
change the screen size to see responsiveness