При щелчке выпадающего меню начальной загрузки все элементы в div смещаются в центр

Question

https://jsfiddle.net/vp1rrrLt/

Конечно, это какая-то проблема с Flexbox, но я не уверен, как это исправить.

Я собираюсь попробовать те же результаты с блоком и плавающим.

---

<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

этот код будет работать:

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

скрипка : https://jsfiddle.net/gLzgedp8/

изменить размер экрана, чтобы увидеть отзывчивость

Answer 2

Используйте !important в следующем стиле.Стили раскрывающегося списка переопределяют ваши стили при открытии раскрывающегося списка

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